Que sont Scss et Sass ?

Sass est un langage de prétraitement CSS écrit en Ruby ; Sass peut fournir une syntaxe plus simple et plus élégante, tout en fournissant une variété de fonctions pour créer des feuilles de style maintenables et gérables. Scss est une nouvelle syntaxe introduite par Sass3 et est un sur-ensemble de la syntaxe CSS3. Pour parler franchement, Scss est une version améliorée de Sass.

L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, Sass version 3.7.4.

Recommandé : Tutoriel vidéo CSS

Qu'est-ce que Sass

Sass est un langage supérieur à Le métalangage CSS 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 Sass 3 L'introduction de la nouvelle syntaxe est l'abréviation de Sassy CSS, qui est un sur-ensemble de la syntaxe CSS3, ce qui signifie que tous les styles CSS3 valides conviennent é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.

Puisque 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 des extensions 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.

Similitudes et différences entre Scss et Sass

Sass et Scss sont en fait la même chose. Nous les appelons généralement Sass. Il existe des différences entre. les deux. Les principales différences sont les deux points suivants :

1. Les extensions de fichier sont différentes. Sass utilise le suffixe ".sass" comme extension, tandis que Scss utilise le suffixe ".scss". .

2. La méthode d'écriture grammaticale est différente. Sass est écrit avec des règles de grammaire d'indentation strictes, sans accolades ({}) ni point-virgule (;), tandis que l'écriture grammaticale de Scss est la même que celle de notre CSS. est écrit d'une manière très similaire.

Autant jeter un œil aux deux morceaux de code suivants, qui seront plus intuitifs et plus faciles à comprendre.

Code Sass simple

#sidebar
width: 30%
background-color: #faa

Code Scss correspondant

#sidebar {
   width: 30%;
   background-color: #faa;
}

De plus, SCSS n'est pas sensible aux caractères d'espacement. Le code ci-dessus peut également être écrit comme suit :

#sidebar {width: 30%; background-color: #faa}

Autant partager quelques morceaux supplémentaires de code Scss

Sass autorise les sélecteurs imbriqués. Par exemple, le code CSS suivant :

div {
     h1 {
        color:blue;
    }
 }

Le style CSS de sortie est

div h1 {
    color: blue;
}

Dans les blocs de code imbriqués, vous pouvez utiliser & pour faire référence à l'élément parent. Par exemple, la pseudo-classe a:hover peut être écrite comme :

a {
    &:hover { color: #0099cc; }
}

Le style CSS de sortie est

a:hover {
   color: #0099cc;
}

Pour plus de connaissances liées à la programmation, veuillez visiter : Apprentissage en programmation! !

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!