Guide avancé Sass - Rédigez une feuille de style plus élégante

Language 2023-01-29 19:59:18 views: null

Je pensais que je le savais déjà. J'utilisais essentiellement le sassstyle d'écriture lors de l'écriture de projets dans l'entreprise auparavant, ce qui était très fluide. Jusqu'à un certain temps, j'allais Element Plusconcevoir la structure d'ingénierie de ma propre bibliothèque de composants avec référence.Quand j'ai vu Element Plusces utilisations élégantes sass, j'ai commencé à avoir honte de ma superficialité et de mon ignorance. Cela a commencé à étudier systématiquement.Pendant sasscette période, j'ai voulu écrire des apprentissages et des partages à plusieurs reprises, mais tous se sont terminés sans problème à cause de diverses choses. Aujourd'hui, j'ai enfin pris un peu de temps dans mon emploi du temps chargé, juste à temps pour partager mes encouragements avec vous.

1. Introduction

cssEn tant que préprocesseur extrêmement mature , il sasspossède de nombreuses fonctions spéciales, qui nous aident à écrire un code de style plus élégant et concis. Il cssa déjà introduit des variables de style et prend également en charge des fonctions telles que l'imbrication, les fonctions, le mélange et le contrôle des commandes, ce qui élargit considérablement le style de jeu.

sassIl existe deux formes de syntaxe : SCSSet Sass.

Parmi eux SCSS, il s'agit d'un format largement utilisé à l'heure actuelle, qui ne se développe que sur la base grammaticale CSS3de .SassCSS hacksvendor-specific syntax.scss

C'estSass le format grammatical le plus ancien, utilisant l'indentation au lieu des accolades, et les retours à la ligne au lieu des points-virgules. Le format est particulièrement concis et l'écriture est plus pratique. Ce format prend également en charge toutes les fonctions, mais il utilise une expression différente Sassà certains endroits et son extension de fichier est nommée .SCSS.sass

L'un ou l'autre format peut être importé (@import) dans un fichier d'un autre format à utiliser, et peut également être sass-convertconverti dans un autre format via un outil de ligne de commande.

# Sass转为SCSS
sass-convert style.sass style.scss
​
# SCSS转为Sass
sass-convert style.scss style.sass

Je n'en présenterai pas l' Sassinstallation et l'utilisation ici.Après tout, la plupart des projets sont maintenant webpackempaquetés et construits à l'aide d'autres outils de construction, complétés par des outils correspondants et loaderd'autres outils pour aider à la compilation. Il devrait y avoir très peu de projets qui doivent utiliser des sasscommandes sur la ligne de commande pour compiler des fichiers de style.

Cependant, le format d' encodage mérite d'être mentionné. Comme avec CSS, vous pouvez utiliser @hcarsetpour déclarer un format d'encodage spécifique : insérez-le au début du fichier de style (au premier caractère) @charset "encoding-name", et Sassle fichier sera compilé selon le format d'encodage donné. Bien entendu, le format d'encodage utilisé doit être convertible en Unicodejeu de caractères. SassSortez le fichier dans UTF-8encoding , et ajoutez une déclaration au fichier de sortie CSSsi des non-caractères apparaissent dans le fichier compilé .ASCII@charset

2. Extension des fonctions de base

1. Règles imbriquéesNested Rules

SassIl prend en charge CSSl'intégration d'un ensemble de styles dans un autre ensemble de CSSstyles, et le style interne utilisera le sélecteur externe comme sélecteur parent.

#main p {
  color: #00ff00;
  width: 97%;
​
  .redbox {
    background-color: #ff0000;
    color: #000000;}
}

Celui-ci serait Sasscompilé comme suit CSS:

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

La fonction d'imbrication réduit considérablement la quantité de code, nous n'avons plus besoin d'écrire à plusieurs reprises des sélecteurs de parents encombrants et elle est facile à gérer.

2. Sélecteur parent &( Referencing Parent Selectors: &)

Dans l'imbrication, si vous avez besoin de faire référence au sélecteur parent, comme lors de la définition d'un :hoverstyle pour un élément, ou lorsqu'un bodyélément a une certaine valeur classname, il peut être &utilisé pour faire référence au sélecteur parent, c'est-à-dire son sélecteur externe.

a {
  font-weight: bold;
  text-decoration: none;
  // & 引用父元素&:hover { text-decoration: underline; }
  // body.firefox 可以直接引用
  body.firefox & { font-weight: normal; }
}

sera Sasscompilé comme suit CSS:

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

&Doit être le premier caractère d'un sélecteur, mais il peut être suivi de suffixes pour générer des sélecteurs composés :

#main {
  color: black;
  // #main-sidebar 字符串拼接，这就有点好玩了&-sidebar { border: 1px solid; }
}

Ce serait compilé à:

#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
}

3. Imbrication des attributsNested Properties

Certains CSSsuivent le même espace de noms ( namespace), comme les font-family, font-size, font-weightdeux ont des fontespaces de noms comme attributs. À l'heure actuelle, pour des raisons de simplicité d'écriture et de gestion pratique, les Sassattributs peuvent être imbriqués dans les espaces de noms :

.funky {
  // 注意命名空间这里要加冒号
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;}
}

compile comme suit CSS:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

Parmi eux, l'espace de noms peut également contenir ses propres valeurs d'attribut :

.funky {
  // font-size/line-height
  font: 20px/24px {
    family: fantasy;
    weight: bold;}
}

se compile en :

.funky {
  /* font-size/line-height */
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
}

4. Sélecteur d'espace réservé %foo( Placeholder Selectors: %foo)

Les sélecteurs d'espace réservé sont similaires idaux sélecteurs et aux classsélecteurs, sauf que le symbole est %, et doivent être @extendappelés via des instructions, sinon ils ne participeront pas à Sassla compilation.

5. RemarquesComments

SassLes commentaires sur une seule ligne //et les commentaires sur plusieurs lignes sont pris en charge /* */. Les commentaires multi-lignes sont entièrement sortis dans le CSSfichier compilé . !Sera le premier caractère d'un commentaire multiligne signifie conserver ce commentaire dans le mode de sortie compressé et le sortir dans le fichier, qui est généralement utilisé pour ajouter des informations de copyright. Les instructions d'interpolation ( ) peuvent générer des valeurs variables dans des commentaires multilignes. (À utiliser pour l'interpolation.)CSSinterpolation#{$val}

// Sass
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
​
// 编译为CSS：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

3. Extension des fonctions avancées

1.SassScript

SassFournit une SassScriptfonction puissante nommée , qui peut être appliquée à n'importe quel attribut, permettant aux attributs d'utiliser des fonctions supplémentaires telles que des variables et des opérations arithmétiques.

1.1Interactive Shell

Interactive ShellFonctionnalités pouvant être testées en ligne de commande SassScript. Entrez sur la ligne de commande sass -i, puis entrez ce que vous voulez tester pour SassScriptvoir la sortie.

sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

1.2 Variables$ Variables: $

L'utilisation des variables est très simple :

// 声明变量
$width: 5em;
​
#main {// 使用变量
  width: $width;
}

Les variables ont une portée au niveau du bloc et les variables dans les règles imbriquées sont des variables locales qui ne peuvent être utilisées que dans les règles imbriquées. Les variables globales peuvent être utilisées n'importe où. L'ajout !globald'une déclaration transforme une variable locale en variable globale .

// Sass
#main {// !global声明，转换为全局变量
  $width: 5em !global;
  width: $width;
}
​
#sidebar {
  // 使用全局变量
  width: $width;
}
​
// 编译为CSS:
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

1.3 Types de donnéesData Types

SassScript7Les principaux types de données sont supportés :

  • Nombres, avec unités, 1, 2, 3, 6, 10pxetc. ;
  • chaîne (les guillemets et les non guillemets sont pris en charge), "foo", "bar", baz;
  • couleur, blue, #04a3f9, rgba(255,0,0,0.5)etc.;
  • booléen, true, false;
  • NUL,null ;
  • Tableau ( list), avec des espaces ou des virgules comme délimiteurs, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif;
  • maps, ce qui équivaut à JSoù Object, (key1: value1, key2: value2).

En outre, d'autres valeurs d'attribut SassScriptsont également prises en charge , telles que les jeux de caractères ou les déclarations, mais celles-ci ne sont pas traitées spécialement, mais sont traitées comme des chaînes sans guillemets.CSSUnicode!important

1.3.1 Chaînes

SassScriptLes chaînes entre guillemets ( ) et sans guillemets ( ) sontquoted strings prises en charge . Ces deux chaînes ne seront pas converties l'une à l'autre au moment de la compilation, sauf dans un cas : lors de l'utilisation de ( ), la chaîne entre guillemets sera compilée en une chaîne sans guillemets, ce qui est pratique pour citer le nom du sélecteur dans .unquoted strings#{}interpolationmixin

// Sass
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";}
}
@include firefox-message(".header");
​
// 编译为CSS
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}
1.3.2 tableau ( lists)

Un tableau fait référence à Sassla façon de gérer une série de valeurs CSSdans margin: 10px 15px 0 0ou font-face: Helvetica, Arial, sans-seriftelles séparées par des espaces ou des virgules. En fait, les valeurs individuelles sont également traitées comme des tableaux contenant une seule valeur.

Le tableau lui-même n'a pas beaucoup de fonctions, mais Sass list functionsil apporte de nombreuses nouvelles fonctions au tableau : nthles fonctions peuvent accéder directement à un élément du tableau ; joinles fonctions peuvent connecter plusieurs tableaux ensemble ; les appendfonctions peuvent ajouter de nouvelles valeurs au tableau ; @eachles fonctions peut parcourir chaque élément du tableau.

Les tableaux peuvent contenir des sous-tableaux : par exemple 1px 2px, 5px 6px, est contient deux1px 2px tableaux de et . 5px 6pxSi les tableaux interne et externe utilisent la même méthode de séparation, vous devez utiliser des parenthèses pour envelopper la couche interne, par exemple (1px 2px) (5px 6px). Les parenthèses ne seront pas conservées lors de la compilation, donc peu importe la manière dont elles sont écrites, 1px 2px, 5px 6pxou (1px 2px) (5px 6px)le résultat final de la compilation est le même, mais elles Sassont des significations différentes dans le fichier, la première signifie un tableau contenant quatre valeurs, et la seconde signifie un tableau contenant deux On peut dire que les parenthèses soulignent la notion de "groupement".

()Utilisé pour représenter un tableau vide, et peut également représenter empty map. Les tableaux vides ne seront pas compilés directement CSS, et s'il y a des tableaux vides ou des valeurs nulles dans le tableau, ils seront effacés au moment de la compilation. Comme 1px 2px () 3pxou 1px 2px null 3px. Les tableaux séparés par des virgules sont autorisés à conserver la virgule finale, qui vise à souligner la relation structurelle du tableau, en particulier lorsqu'il est nécessaire de déclarer un tableau contenant une seule valeur. Par exemple (1,)représente 1un tableau contenant uniquement .

1.3.3maps

mapest une collection de paires clé-valeur, keyet les deux peuvent être des objets valuearbitraires . SassScriptLui et listles deux fonctionnent avec des fonctions. Par exemple, map-getles fonctions peuvent être utilisées pour rechercher des paires clé-valeur, les fonctions peuvent map-mergeêtre utilisées pour ajouter de nouvelles paires clé-valeur et @eachles directives peuvent être utilisées pour ajouter des styles à chaque paire clé-valeur. mapIl peut être utilisé partout où il peut être utilisé list, mais pas l'inverse. Lorsqu'il est maputilisé listdans des fonctions, il est traité comme key1 value1, key2 value2un tableau du formulaire.

1.3.4 Couleur

Toute CSSexpression de couleur renvoie une SassScriptvaleur de couleur. unquoted stringsCelui-ci contient un grand nombre de couleurs nommées (souvent impossibles à distinguer des chaînes sans guillemets ).

1.4 FonctionnementOperations

Tous les types de données prennent en charge l'opération d'égalité ==OU !=, en outre, chaque type de données a également sa propre méthode d'opération.

1.4.1 Opérations numériquesNumber Operations

SassScriptPrend en charge l'addition, la soustraction, la multiplication et la division ainsi que les opérations d'arrondi ( +, -, *, /, %), convertissant les valeurs entre les unités si nécessaire. L'opérateur relationnel ( >, <, >=, <=) peut également être utilisé pour les opérations numériques.

// Sass
p {
  width: 1in + 8pt;
}
​
// 编译为：
p {
  width: 1.111in; 
}
  • opération de division/

L'opération de division mérite une mention séparée. Parce que les /symboles CSSjouent généralement le rôle de séparer les nombres dans . Dans SassScript, /non seulement pour séparer les nombres, mais aussi pour les opérations de division. Dans les trois cas suivants, /il s'agit d'une opération de division :

  • lorsque la valeur ou une partie d'une valeur est une variable ou la valeur de retour d'une fonction ;
  • Lorsque la valeur est entourée de parenthèses ;
  • Lorsque la valeur fait partie d'une expression arithmétique.
// Sass
p {
  font: 10px/8px;             // 普通的CSS
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 函数返回值，是除法运算
  height: (500px/2);          // 使用圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 算数运算表达式的一部分，是除法运算
}
​
// 编译为CSS
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

Si vous avez besoin d'utiliser une variable et que vous ne voulez pas qu'elle /soit utilisée comme opérateur de division, vous pouvez #{}envelopper la variable avec :

// Sass
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}

// 编译为CSS
p {font: 12px/30px; 
}
1.4.2 Opération de valeur de couleurColor Operations

Le fonctionnement de la valeur de couleur est calculé par sections, c'est-à-dire que R, G, Bles valeurs sont calculées séparément.

p {
  color: #010203 + #040506;
}

Calculé en morceaux 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09, puis compilé comme suit :

p {
  color: #050709; 
}

peut être utilisé color functions, ce qui est un peu plus pratique que les calculs de couleur.

Les valeurs de couleur peuvent également être combinées avec des opérations numériques :

p {
  color: #010203 * 2;
}
​
// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为:
p {
  color: #020406; 
}

Il convient de noter que si la valeur de couleur contient alpha channel, la valeur de couleur impliquée dans le calcul doit avoir la même alphavaleur pour effectuer l'opération, car l'opération arithmétique n'agira pas sur la alphavaleur.

p {
	// 需要保证有相同的alpha值color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

La valeur de la valeur de couleur alphapeut être ajustée via la fonction opacityou transparentize.

// Sass
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
​
// 被编译为：
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}
1.4.3 Opérations sur les chaînesString Operations

Utilisez une +chaîne de concaténation ; +la valeur à gauche prédomine, que le résultat final compilé soit entre guillemets ou non.

Lorsque l'expression d'opération est utilisée conjointement avec d'autres valeurs, utilisez des espaces comme connecteurs :

p {
  margin: 3px + 4px auto;
}
// 编译为：
p {
  margin: 7px auto; 
}

Vous pouvez #{}insérer des valeurs dynamiques en utilisant :

$value: null;
p:before {content: "I ate #{$value} pies!";
}

// 编译为CSS:
p:before {content: "I ate pies!"; 
}
1.4.4 Opérations booléennesBoolean Operations

Prise en charge des opérations booléennes and, or, not.

1.4.5 Fonctionnement du tableau

Les tableaux ne prennent pas en charge les opérations directes et ne peuvent list functionsêtre manipulés qu'à l'aide de.

1.5 Parenthèses(Parentheses)

Les parenthèses sont comptées en premier.

1.6 FonctionsFunctions

SassScriptIl existe de nombreuses fonctions intégrées, certaines peuvent même être CSSappelées à l'aide d'instructions ordinaires :

p {
  color: hsl(0, 100%, 50%);
}
// 编译为：
p {
  color: #ff0000; 
}
  • arguments de mots clésKeyword Arguments

SassLes fonctions autorisent des arguments de mots-clés, l'exemple ci-dessus peut être écrit comme suit :

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

SassIl existe de nombreuses fonctions intégrées, je ne les développerai donc pas ici.

1.7 Déclarations d'interpolationInterpolation #{}

Les variables peuvent #{}être utilisées dans les sélecteurs ou les noms de propriété via :

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

// 编译为：
p.foo {border-color: blue; 
}

SassScripten 1.8&

&Représente le sélecteur parent. Comme suit, &la valeur de ((".foo.bar" ".baz.bang"), ".bip.qux").

.foo.bar .baz.bang, .bip.qux {$selector: &;
}

S'il n'y a pas de sélecteur parent, &la valeur est null. Cela peut être appliqué mixinpour détecter s'il existe un sélecteur parent :

@mixin does-parent-exist {
  @if & {
    // 有父选择器
  &:hover {
      color: red;
  }} @else {
    // 没有父选择器
    a {
      color: red;
  }}
}

1.9 Valeur par défaut des variables ( Variable Defaults) :!default

L'ajout à la fin d'une variable !defaultpermet d' affecter une valeur à !defaultune variable à laquelle aucune déclaration n'a été affectée. nullL'affectation ne fonctionnera que si la variable n'a pas reçu de valeur ou si une valeur nulle a été affectée !default.

$content: "First content";
// 变量已被赋值，无效
$content: "Second content?" !default;
$new_content: "First time reference" !default;
​
#main {
  content: $content;
  new-content: $new_content;
}
​
// 编译为：
#main {
  content: "First content";
  new-content: "First time reference"; 
}

2. @-Rulesavec la commande ( Directives)

SassToutes les directives CSS3 @-Rulesainsi que Sassdes directives spécifiques ( directives) sont prises en charge.

2.1@import

SassFonctionnalité étendue @importpour permettre l'importation .scsset .sassle fichier. Les fichiers importés seront fusionnés et compilés dans le même CSSfichier. De plus, les variables contenues dans le fichier importé peuvent ou mixinnon être disponibles dans le fichier importé.

Généralement, le fichier @importest trouvé Sasset importé, avec les exceptions suivantes, qui sont traitées comme une CSSsyntaxe normale :

  • L'extension de fichier est .css;
  • Les noms de fichiers http://commencent par ;
  • Le nom du fichier est url();
  • @importcontenir media queries.

Il est permis d'importer plusieurs fichiers à la fois.Lorsqu'aucune extension n'est écrite, il essaiera de trouver .scssou .sassle fichier portant le même nom.

@import "rounded-corners", "text-shadow";

Les fichiers d'importation peuvent également utiliser des instructions d'interpolation #{}, mais uniquement pour CSSla url()méthode d'importation.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
​
// 编译为：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@importsIl existe également deux utilisations spéciales : partials et nesting .

  • Diaphragme ( Partials)

Parfois, vous souhaitez importer Sassun fichier, mais vous ne voulez pas le compiler en tant que CSS, vous pouvez ajouter un trait de soulignement avant le nom du fichier, ce qui Sassvous indiquera de ne pas le compiler. Notez que le trait de soulignement n'est pas requis dans l'instruction d'importation. Par exemple, si le fichier est nommé _colors.scss, le code suivant importe le _colors.scssfichier et il ne sera pas compilé en tant que CSS.

@import "colors";

Il convient de noter que s'il existe des fichiers portant le même nom qui contiennent des traits de soulignement de début et des fichiers qui ne contiennent pas de traits de soulignement de début, les fichiers qui ajoutent des traits de soulignement seront ignorés.

  • imbrication@import

Dans la plupart des scénarios, nous l'utilisons au niveau supérieur du fichier @imports. En fait, l'imbrication peut également être @importsimbriquée dans des CSSstyles ou @media. La différence avec son utilisation dans la couche supérieure est que le style importé de cette manière ne peut apparaître que dans la couche imbriquée, ce qui peut être compris comme "portée locale".

// example.scss
.example {
  color: red;
} 

// main.scss
#main {
  @import "example";
}

sera éventuellement compilé en :

#main .example {
  color: red;
}

Cependant, il convient de noter qu'il ne doit pas y avoir d' instructions de niveau supérieur telles que , etc. @importdans les fichiers importés par ce formulaire imbriqué .@mixin@charset

2.2@media

Sassest le @mediamême CSSque dans , avec l'ajout de nouvelles fonctionnalités :

  • Il est autorisé à être CSSimbriqué dans des règles. Lorsqu'il @mediaest imbriqué dans CSSune règle, lorsqu'il est compilé, il sera compilé dans la couche la plus externe du fichier et contient le sélecteur parent lorsqu'il était imbriqué auparavant, ce qui est très pratique.
// Sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;}
}
​
// 编译为
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}
  • @mediaL'imbrication est autorisée queries, qui est automatiquement ajoutée au moment de la compilation and.
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
  }}
}
​
// 编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}
  • Vous pouvez utiliser SassScript(variable, fonction, etc.) au lieu du nom ou de la valeur de la condition.
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
​
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;}
}
​
// 编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } 
}

2.3@extend

  • @extendUn sélecteur peut être fait pour hériter du style d'un autre sélecteur via .
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  // 继承，此时所有使用到 .error 的样式都会被继承过来
  @extend .error;
  border-width: 3px;
}
​
// 编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
​
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}
​
.seriousError {
  border-width: 3px; 
}
  • Placeholder Selectorssélecteur d'espace réservé

Parfois, il est nécessaire de définir un ensemble de styles pour l'héritage, pas pour un certain élément, et nous espérons qu'il ne sera pas Sasscompilé et sorti séparément. Ce genre de scène se produit plus souvent lors de la création d'une Sassbibliothèque de styles. Ainsi est né le sélecteur d'espace réservé. Son utilisation est presque identique idà selector ou classselector, la notation du selecteur est %. Lorsqu'ils sont utilisés seuls, les sélecteurs d'espace réservé sont Sassignorés et ne sont pas compilés dans le fichier de sortie.

// 不会被编译到输出文件中
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

Il doit @extendêtre utilisé par :

.notice {
  @extend %extreme;
}
​
// 被编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}
  • !optionaldéclaration

En utilisant !optionaldes déclarations, il est possible @extendde ne pas générer de nouveaux sélecteurs.

// 不可以，因为没有 .notice
a.important {
  @extend .notice
}
​
// 可以
a.important {
  @extend .notice !optional;
}
  • utilisé dans la commande@extend

Afin d'éviter de générer beaucoup de code inutile, étendez ( @extend) dans l'instruction et limitez l'extension aux sélecteurs du même niveau d'instruction.

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;}
  .seriousError {
    // 可以
    // .error 同在一个 @meida层级中
    @extend .error;
    border-width: 3px;}
}
​
// 以下为反面栗子
.error {
  border: 1px #f00;
  background-color: #fdd;
}
​
@media print {
  .seriousError {
    // 不可以, .error 不在当前的@meida指令层级中
    @extend .error;
    border-width: 3px;}
}

2.4@at-root

Utilisez @at-rootdes directives pour hisser les sélecteurs sélectionnés au niveau le plus externe.

.parent {...
  @at-root .child { ... }
}
​
// 编译为
.parent { ... }
.child { ... }
  • Il peut s'agir d'une structure de niveau bloc contenant plusieurs sélecteurs.
.parent {...
  @at-root {
    .child1 { ... }
    .child2 { ... }}
  .step-child { ... }
}
​
// 编译为
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
  • Utilisez with:xxx yyy ...ou without:xxx yyy ...pour vous assurer que la directive externe est valide pour le sélecteur promu à la couche la plus externe :
// without:
@media print {
  .page {
    width: 8in;
    // without: media 让选择器不受外层的@media影响
    @at-root (without: media) {
      color: red;
  }}
}
​
// 编译为
@media print {
  .page {
    width: 8in;}
}
.page {
  color: red;
}

3. Commandes de contrôleControl Derectives

Les directives de contrôle sont utilisées pour référencer les styles sous certaines conditions.

3.1if()

La iffonction intégrée peut être utilisée dans n'importe quel SassScriptcontexte de script.

3.2@if

@ifLa condition est remplie lorsque la valeur de retour de l'expression de l'instruction n'est pas falseou null. @else ifPeut être connecté plus tard @else.

$type: monster;
p {
  @if $type == ocean {
    color: blue;} @else if $type == matador {
    color: red;} @else if $type == monster {
    color: green;} @else {
    color: black;}
}
​
// 编译为
p {
  color: green; 
}

3.3@for

Cette directive a deux formats : @for $var from <start> through <end>, ou @for $var from <start> to <end>. Les deux contiennent le point de départ <start>, la différence est toqu'il ne contient pas <end>, mais throughcontient <end>. En outre, $varpeut être n'importe quelle variable, mais <start>et <end>doivent être des nombres entiers.

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
​
// 编译为
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}

3.4@each

@eachFormat de commande :@each $var in <list>

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }
  • Plusieurs variables peuvent être appliquées en même temps , ce qui est pratique lors de l'écriture de styles qui ont des formes similaires mais des valeurs différentes :
@each $animal, $color, $cursor in (puma, black, default),
                                (sea-slug, blue, pointer),
                                (egret, white, move) {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }
  • Puisqu'il mapssera traité comme un tableau lists, @eachpeut égalementmap être utilisé :
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {
    font-size: $size;}
}
​
// 编译为
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

3.5@while

whileCirculation, je comprends.

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  // 更改条件变量
  $i: $i - 2;
}
​
//编译为
.item-6 {
  width: 12em; }
​
.item-4 {
  width: 8em; }
​
.item-2 {
  width: 4em; }

4. Commandes mixtes ( Mixin Directives)

mixinUtilisé pour définir des styles réutilisables.

4.1 Définition des instructions mixtes @minin( Defining a Mixin: @mixin)

Après avoir @mixinajouté le nom et le style, vous pouvez définir l'instruction mixte. Notez que vous devez inclure des sélecteurs et des attributs, et vous pouvez également utiliser &pour faire référence au sélecteur parent.

// 定义名为 clearfix 的混合指令
@mixin clearfix {
  display: inline-block;
  // & 指代父选择器。注意，这个混合指令里虽然它没有父选择器，
  // 但是混合指令使用的地方，可以产生父选择器&:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
  // 这里的 & 同理* html & { height: 1px }
}

4.2 Instructions mixtes de référence @include( Including a Mixin: @include)

  • Utilisez @include MixinNamepour citer une directive mixin :
.page-title {
  // 引用混合指令，将 clearfix 中的规则混入到 .page-title 中
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
}
  • Il peut également être directement référencé et mélangé au niveau le plus externe, sans définir d'attributs et sans sélecteur parent auquel se référer :
@mixin silly-links {
  a {
    color: blue;
    background-color: red;}
}
@include silly-links;
​
//编译为
a {
  color: blue;
  background-color: red; }

Dans les directives mixin que nous écrivons, il est préférable de ne définir que des sélecteurs descendants, afin qu'ils puissent être importés en toute sécurité n'importe où dans le fichier.

  • Une directive composée peut faire référence à d'autres directives composées :
@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

4.3 Paramètres ( Arguments)

Les paramètres peuvent être utilisés pour définir des variables pour le style des commandes mixtes et attribuer des valeurs. Lors du référencement et de la définition d'instructions mixtes, l'ordre des paramètres doit être une correspondance un à un et les paramètres peuvent se voir attribuer des valeurs par défaut.

// $width有默认值
@mixin sexy-border($color, $width: 1in) {
  // 注意这里得 border，是CSS命名空间
  border: {
    color: $color;
    width: $width;
    style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
​
// 编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
​
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

De plus, il y a deux autres points importants concernant les paramètres :

  • Paramètre mot-clé ( Keyword Arguments) : Lors Mixindu passage d'un paramètre par référence, passez précisément la valeur en spécifiant le mot-clé du paramètre (nom du paramètre).
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

Bien que l'écriture soit un peu lourde, elle est facile à lire et peut être attribuée avec précision.

  • Variable de paramètre ( Variable Arguments): Lorsque vous n'êtes pas sûr du nombre de paramètres dont la commande mixte a besoin, vous pouvez utiliser la variable de paramètre à la fin du paramètre ...à déclarer, et Sassces paramètres seront traités comme une liste de valeurs.
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
​
// 编译为
.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Vous pouvez également utiliser des variables de paramètre lors de la citation :

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
​
// 编译为
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

4.4 Importer du contenu dans la commande mixte @content( Passing Content Blocks to a Mixin)

Lorsque vous citez Mixin, en particulier lorsque vous citez au niveau de la couche la plus externe du fichier, vous pouvez utiliser des @contentespaces réservés, puis @includeimporter le contenu suivant dans @contentla position, similaire aux modèles, aux emplacements, etc.

@mixin apply-to-ie6-only {* html {
    @content;}
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);}
}
​
// 编译为
* html #logo {
  background-image: url(/logo.gif);
}

En raison de son utilisation fréquente Mixindans Sassles bibliothèques de styles. Afin de simplifier l'utilisation, il peut être =exprimé @mixinpar, et +exprimé par @include.

// Sass (这里就是Sass格式的语法了，而非SCSS格式)
=apply-to-ie6-only* html
    @content
​
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)
  • Contenu de niveau bloc et portée de variable : En @contentimportant du contenu de niveau bloc, sa portée est associée au contexte où il est défini, et n'a rien à voir avec la portée à l'intérieur de l'instruction mixte.
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  // @content 的内容的作用域在定义它的地方
  @content;
  border-color: $color;
}
.colors {
  @include colors { // 这里的color，虽然会被插入到@content的位置// 但是它的作用域是在定义它的地方，
    // 而定义它的地方，$color是全局变量，值为whitecolor: $color; }
}
​
// 编译为
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

Notez que toutes les définitions ne sont pas dans la portée globale, et il est également possible que la définition soit imbriquée dans un sélecteur, et que la portée soit la portée locale du sélecteur.

5. Instruction de fonction ( Function Directives)

SassPermet des fonctions personnalisées, les fonctions peuvent être utilisées dans n'importe quelle valeur d'attribut ou SassScript. Les noms de fonctions personnalisées peuvent être préfixés pour éviter les conflits de nommage.

$grid-width: 40px;
$gutter-width: 10px;
​
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
​
#sidebar { width: grid-width(5); }
​
// 编译为
#sidebar {
  width: 240px; 
}

6. Format de sortie

6.1:nested

Nested( :nested) est sassle format de sortie par défaut de , qui reflète clairement la CSSrelation HTMLentre et . Les sélecteurs et les attributs occupent une ligne distincte et l'indentation est sasscohérente avec celle du fichier, s'appuyant sur l'indentation pour refléter le niveau d'imbrication.

// 编译后输出的CSS文件
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

6.2:expanded

Le format d' expansion ( :expanded) est le même que lors de l'écriture à la main et le sélecteur n'est pas en retrait.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

6.3:compact

Le format compact ( Compact) prend moins de place, chaque CSSrègle n'occupe qu'une seule ligne, les sélecteurs imbriqués ne laissent pas de lignes vides et les sélecteurs non imbriqués laissent des lignes vides entre eux.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
​
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

6.4:compressed

Le format compressé ( Compressed) ne laisse pas de lignes vides, d'espaces, de commentaires, etc., et le volume de sortie est le plus petit.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Enfin

Une trousse d'information préliminaire est préparée pour tout le monde. Contient 54 livres électroniques liés au front-end 2.57G, "Collection d'interviews front-end (avec réponses et analyse)", des didacticiels vidéo sur les connaissances difficiles et clés (ensemble complet).



Amis dans le besoin, vous pouvez cliquer sur la carte ci-dessous pour recevoir et partager gratuitement

Je suppose que tu aimes

Origine blog.csdn.net/web22050702/article/details/128664031
conseillé
Classement
du quotidien
Plus
2025-03-26(0)
2025-03-25(0)
2025-03-24(0)
2025-03-23(0)
2025-03-22(0)
2025-03-21(0)
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)

Code World

© 2018 codetd.com