Premiers pas avec Sass
Sass est un précompilateur pour CSS. Sass peut simplifier beaucoup de code CSS et lui donner un aspect concis et beau.
1. Déclaration et utilisation des variables
La déclaration des variables Sass commence par $, ce qui est similaire à la déclaration des variables CSS.
Par exemple :
La valeur de la variable bg-Color est rouge.
Lorsque vous utilisez des variables, appelez simplement les variables directement.
De cette façon, les valeursde color et background-color sont toutes deux rouges.
2. Les noms de variables doivent-ils être séparés par des traits de soulignement ou des traits de soulignement ?
L'explication sur le site officiel est : c'est à vous de décider.
Comment puis-je le dire, même si vous écrivez $bg-color pour définir la variable, puis écrivez $bg_color lorsque vous y faites référence, elle peut toujours être utilisée normalement.
3. Règles CSS imbriquées.
L'exemple ci-dessus convertira le CSS dans le même effet que celui que vous avez vu auparavant lors de sa sortie. Dans ce processus, Sass utilise deux étapes : chaque étape consiste à ouvrir les blocs de règles imbriqués un par un, comme on ouvre une poupée matriochka russe.
3.1. L'identifiant du sélecteur parent &
Il existe une situation courante, telle que l'ajout d'un sélecteur de pseudo-classe :hover à la balise a. Lorsque vous écrivez comme ceci :
Lorsque tous les éléments enfants de la balise a sous nav sont survolés, la couleur de la police deviendra rouge.
À ce stade, un identifiant peut résoudre ce problème, tel que :
Lorsque la règle imbriquée contenant l'identifiant du sélecteur parent est ouverte, elle ne sera pas épissée. comme les sélecteurs descendants, mais & sera directement remplacé par le sélecteur parent. Après compilation, il deviendra :
3.2. Imbrication des sélecteurs de groupe
Dans Dans le processus de développement modulaire, les styles CSS rencontreront de nombreuses situations de ce type.Le style de chaque module doit être enveloppé avec le nom de classe le plus externe du module, afin d'éviter les conflits de style.
À ce stade, une grande liste de noms de styles apparaîtra dans le fichier CSS :
À ce stade, les avantages de l'imbrication Sass sont reflétés : Vous pouvez ensuite l'utiliser dans votre feuille de style via @include. Placez ce mixeur où vous le souhaitez. L'appel @include extraira tous les styles du mixeur et les placera là où @include est appelé. Mixer Défini à l'aide de l'identifiant @mixin. Ressemble beaucoup à d'autres identifiants CSS @, tels que @media ou @font-face. Cet identifiant donne un nom à un bloc de styles afin que vous puissiez facilement réutiliser le style en référençant le nom. Le code sass suivant définit un mixeur très simple, le but est d'ajouter des bordures arrondies entre navigateurs : 6. Mixer La manière la plus directe de coder5. Commentaires silencieux Sass a également une règle @import, mais la différence est que la règle @import de sass importe les fichiers associés lors de la génération de fichiers CSS. Cela signifie que tous les styles associés sont combinés dans le même fichier CSS sans qu'il soit nécessaire de lancer des demandes de téléchargement supplémentaires. De plus, toutes les variables et mélangeurs définis dans le fichier importé (voir Section 2.5) sont disponibles dans le fichier importé. CSS a une fonctionnalité particulièrement rare, qui est la règle @import, qui permet d'importer d'autres fichiers CSS dans un fichier CSS. Cependant, la conséquence est que le navigateur téléchargera d'autres fichiers CSS uniquement lorsque @import est exécuté, ce qui ralentit le chargement de la page. Je trouve cette fonction particulièrement utile. Les mots originaux du site officiel sont les suivants : 4. Importer des fichiers SASS Les règles pour les attributs imbriqués sont les suivantes : déconnectez le nom de l'attribut du tiret - et ajoutez un deux-points après l'attribut racine : , suivi d'un bloc { }, écrivez la partie sous-attribut dans ce bloc { }. Après compilation : Les attributs imbriqués sont des attributs qui prennent également en charge l'imbrication. Par exemple : 3.4 Attributs imbriqués Après compilation, il devient Into : En fait, il suit les règles du CSS :
3.3. Sélecteurs de sous-combinaisons et sélecteurs de combinaisons de même niveau : >, + et ~
