Quelle est la différence entre sass et scss

Différences : 1. Sass utilise le suffixe ".sass" comme extension, tandis que SCSS utilise le suffixe ".scss" comme extension ; 2. Sass est écrit avec des règles de grammaire d'indentation strictes, sans accolades "{}" ni point-virgule. ";", et la syntaxe de SCSS est très similaire à celle de CSS, avec des accolades et des points-virgules.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Qu'est-ce que Sass

Sass est un méta-langage supérieur au CSS. Il peut être utilisé pour décrire les styles de fichiers de manière claire et structurelle, et possède des fonctions plus puissantes que le CSS ordinaire. Sass offre une syntaxe plus propre et plus élégante tout en fournissant des fonctionnalités permettant de créer des feuilles de style maintenables et gérables.

Sass est un langage de prétraitement CSS écrit en langage Ruby. Il est né en 2007 et est le plus grand langage de prétraitement CSS mature. Il a été initialement conçu pour fonctionner avec HAML (un précompilateur HTML indenté), il a donc le même style d'indentation que HTML. SASS est une extension de CSS3 qui ajoute l'imbrication de règles, des variables, des mixins, l'héritage de sélecteurs, etc. Convertissez-le en code CSS standard et bien formé à l'aide d'outils de ligne de commande ou de plug-ins de framework WEB.

Site officiel de Sass : http://sass-lang.com

Qu'est-ce que Scss

Scss est une nouvelle syntaxe introduite par Sass 3. C'est l'abréviation de Sassy CSS et un surensemble de la syntaxe CSS3, ce qui signifie que tous les styles CSS3 valides s'appliquent également à Sass. Pour parler franchement, Scss est une version améliorée de Sass. Sa syntaxe est entièrement compatible avec CSS3 et hérite des puissantes fonctions de Sass. Autrement dit, toute feuille de style CSS3 standard est un fichier SCSS valide avec la même sémantique. De plus, SCSS peut également reconnaître la plupart des hacks CSS (certaines astuces CSS) et la syntaxe spécifique au navigateur, telle que l'ancienne syntaxe du filtre IE.

Étant donné que Scss est une extension de CSS, tout le code qui fonctionne correctement en CSS fonctionnera également correctement en Scss. En d’autres termes, pour un utilisateur Sass, il vous suffit de comprendre le fonctionnement de l’extension Sass pour bien comprendre Scss. La plupart des extensions telles que les variables, les références parentes et les directives sont identiques ; la seule différence est que SCSS nécessite des points-virgules et des accolades au lieu de nouvelles lignes et d'indentations.

La différence entre sass et scss

Sass et SCSS sont en fait la même chose. Nous l'appelons généralement Sass. Les différences entre les deux sont les suivantes :

• Les extensions de fichier sont différentes, Sass Il utilise le. Le suffixe ".sass" est l'extension, tandis que SCSS utilise le suffixe ".scss" comme extension. La grammaire est écrite différemment avec des règles de grammaire indentées strictes, sans accolades ({}) ni point-virgule (;). la syntaxe de SCSS est très similaire à notre syntaxe CSS.

• Ce qui suit présente leurs règles de compilation :

<span style="font-size: 18px;">sass</span>Compilation

1. Méthode de compilation Sass : <span style="font-size: 18px;">sass</span>的编译

1. sass编译的方法：

• 命令编译
• 自动化编译
• GUI工具编译

注意： “单文件编译” 和 ”多文件编译” 。

2. sass输出方式：

Compilation automatique

输出方式	编译时，携带参数	参考图
sass嵌套输出方式 nested	sass --watch test.scss:test.css --style nested	图1
sass展开输出方式 expanded	sass --watch test.scss:test.css --style expanded	图2
sass展开输出方式 compact	sass --watch test.scss:test.css --style compact	图3
sass展开输出方式 compressed	sass --watch test.scss:test.css --style compressed	Compilation de commandes

Compilation d'outils GUI

Remarque :

"Compilation de fichier unique"

et

" compilation multi-fichiers"

.

2. Méthode de sortie Sass :

🎜🎜🎜Méthode de sortie imbriquée sass nested🎜🎜sass --watch test.scss:test.css --style imbriqué 🎜🎜Figure 1🎜🎜🎜méthode de sortie étendue sassexpansé🎜🎜sass --watch test.scss:test.css --style étendu 🎜🎜Figure 2🎜🎜🎜Méthode de sortie d'expansion sass compact🎜🎜sass --watch test.scss:test.css --style compact🎜🎜Figure 3 🎜🎜🎜Méthode de sortie d'expansion sass compressé🎜🎜sass --watch test.scss:test.css --style compressé🎜🎜Figure 4🎜🎜🎜 🎜 🎜Comparaison de captures d'écran :🎜🎜🎜🎜🎜🎜En plus de l'introduction ci-dessus, sass peut également effectuer des additions/soustractions, des multiplications, des divisions, des calculs de variables, des opérations sur les nombres, des opérations sur les caractères, des opérations sur les couleurs, etc. 🎜🎜🎜 (Partage vidéo d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

Méthode de sortie	Lors de la compilation, porter les paramètres	Image de référence

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!