Je pensais que je le savais déjà. J'utilisais essentiellement le sass
style 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 Plus
concevoir la structure d'ingénierie de ma propre bibliothèque de composants avec référence.Quand j'ai vu Element Plus
ces utilisations élégantes sass
, j'ai commencé à avoir honte de ma superficialité et de mon ignorance. Cela a commencé à étudier systématiquement.Pendant sass
cette 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
css
En tant que préprocesseur extrêmement mature , il sass
possède de nombreuses fonctions spéciales, qui nous aident à écrire un code de style plus élégant et concis. Il css
a 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.
sass
Il existe deux formes de syntaxe : SCSS
et 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 CSS3
de .Sass
CSS hacks
vendor-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-convert
converti 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' Sass
installation et l'utilisation ici.Après tout, la plupart des projets sont maintenant webpack
empaquetés et construits à l'aide d'autres outils de construction, complétés par des outils correspondants et loader
d'autres outils pour aider à la compilation. Il devrait y avoir très peu de projets qui doivent utiliser des sass
commandes 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 @hcarset
pour 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 Sass
le fichier sera compilé selon le format d'encodage donné. Bien entendu, le format d'encodage utilisé doit être convertible en Unicode
jeu de caractères. Sass
Sortez le fichier dans UTF-8
encoding , et ajoutez une déclaration au fichier de sortie CSS
si des non-caractères apparaissent dans le fichier compilé .ASCII
@charset
2. Extension des fonctions de base
1. Règles imbriquéesNested Rules
Sass
Il prend en charge CSS
l'intégration d'un ensemble de styles dans un autre ensemble de CSS
styles, 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 Sass
compilé 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 :hover
style 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 Sass
compilé 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 CSS
suivent le même espace de noms ( namespace
), comme les font-family, font-size, font-weight
deux ont des font
espaces de noms comme attributs. À l'heure actuelle, pour des raisons de simplicité d'écriture et de gestion pratique, les Sass
attributs 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 id
aux sélecteurs et aux class
sélecteurs, sauf que le symbole est %
, et doivent être @extend
appelés via des instructions, sinon ils ne participeront pas à Sass
la compilation.
5. RemarquesComments
Sass
Les 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 CSS
fichier 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.)CSS
interpolation
#{$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
Sass
Fournit une SassScript
fonction 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 Shell
Fonctionnalité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 SassScript
voir 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 !global
d'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
SassScript
7
Les principaux types de données sont supportés :
- Nombres, avec unités,
1, 2, 3, 6, 10px
etc. ; - 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 àJS
oùObject
,(key1: value1, key2: value2)
.
En outre, d'autres valeurs d'attribut SassScript
sont é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.CSS
Unicode
!important
1.3.1 Chaînes
SassScript
Les 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
#{}
interpolation
mixin
// 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 à Sass
la façon de gérer une série de valeurs CSS
dans margin: 10px 15px 0 0
ou font-face: Helvetica, Arial, sans-serif
telles 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 functions
il apporte de nombreuses nouvelles fonctions au tableau : nth
les fonctions peuvent accéder directement à un élément du tableau ; join
les fonctions peuvent connecter plusieurs tableaux ensemble ; les append
fonctions peuvent ajouter de nouvelles valeurs au tableau ; @each
les 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 6px
Si 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 6px
ou (1px 2px) (5px 6px)
le résultat final de la compilation est le même, mais elles Sass
ont 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 () 3px
ou 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 1
un tableau contenant uniquement .
1.3.3maps
map
est une collection de paires clé-valeur, key
et les deux peuvent être des objets value
arbitraires . SassScript
Lui et list
les deux fonctionnent avec des fonctions. Par exemple, map-get
les 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 @each
les directives peuvent être utilisées pour ajouter des styles à chaque paire clé-valeur. map
Il peut être utilisé partout où il peut être utilisé list
, mais pas l'inverse. Lorsqu'il est map
utilisé list
dans des fonctions, il est traité comme key1 value1, key2 value2
un tableau du formulaire.
1.3.4 Couleur
Toute CSS
expression de couleur renvoie une SassScript
valeur de couleur. unquoted strings
Celui-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
SassScript
Prend 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 CSS
jouent 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, B
les 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 alpha
valeur pour effectuer l'opération, car l'opération arithmétique n'agira pas sur la alpha
valeur.
p {
// 需要保证有相同的alpha值color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
La valeur de la valeur de couleur alpha
peut être ajustée via la fonction opacity
ou 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
SassScript
Il existe de nombreuses fonctions intégrées, certaines peuvent même être CSS
appelées à l'aide d'instructions ordinaires :
p {
color: hsl(0, 100%, 50%);
}
// 编译为:
p {
color: #ff0000;
}
- arguments de mots clés
Keyword Arguments
Sass
Les 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%);
}
Sass
Il 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;
}
SassScript
en 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é mixin
pour 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 !default
permet d' affecter une valeur à !default
une variable à laquelle aucune déclaration n'a été affectée. null
L'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. @-Rules
avec la commande ( Directives
)
Sass
Toutes les directives CSS3 @-Rules
ainsi que Sass
des directives spécifiques ( directives
) sont prises en charge.
2.1@import
Sass
Fonctionnalité étendue @import
pour permettre l'importation .scss
et .sass
le fichier. Les fichiers importés seront fusionnés et compilés dans le même CSS
fichier. De plus, les variables contenues dans le fichier importé peuvent ou mixin
non être disponibles dans le fichier importé.
Généralement, le fichier @import
est trouvé Sass
et importé, avec les exceptions suivantes, qui sont traitées comme une CSS
syntaxe normale :
- L'extension de fichier est
.css
; - Les noms de fichiers
http://
commencent par ; - Le nom du fichier est
url()
; @import
contenirmedia queries
.
Il est permis d'importer plusieurs fichiers à la fois.Lorsqu'aucune extension n'est écrite, il essaiera de trouver .scss
ou .sass
le 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 CSS
la 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");
@imports
Il existe également deux utilisations spéciales : partials et nesting .
- Diaphragme (
Partials
)
Parfois, vous souhaitez importer Sass
un 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 Sass
vous 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.scss
fichier 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 @imports
imbriquée dans des CSS
styles 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. @import
dans les fichiers importés par ce formulaire imbriqué .@mixin
@charset
2.2@media
Sass
est le @media
même CSS
que dans , avec l'ajout de nouvelles fonctionnalités :
- Il est autorisé à être
CSS
imbriqué dans des règles. Lorsqu'il@media
est imbriqué dansCSS
une 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; }
}
@media
L'imbrication est autoriséequeries
, qui est automatiquement ajoutée au moment de la compilationand
.
@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
@extend
Un 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 Selectors
sé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 Sass
compilé et sorti séparément. Ce genre de scène se produit plus souvent lors de la création d'une Sass
bibliothèque de styles. Ainsi est né le sélecteur d'espace réservé. Son utilisation est presque identique id
à selector ou class
selector, la notation du selecteur est %
. Lorsqu'ils sont utilisés seuls, les sélecteurs d'espace réservé sont Sass
ignoré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;
}
!optional
déclaration
En utilisant !optional
des déclarations, il est possible @extend
de 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-root
des 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 ...
ouwithout: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 if
fonction intégrée peut être utilisée dans n'importe quel SassScript
contexte de script.
3.2@if
@if
La condition est remplie lorsque la valeur de retour de l'expression de l'instruction n'est pas false
ou null
. @else if
Peut ê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 to
qu'il ne contient pas <end>
, mais through
contient <end>
. En outre, $var
peut ê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
@each
Format 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
maps
sera traité comme un tableaulists
,@each
peut é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
while
Circulation, 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
)
mixin
Utilisé pour définir des styles réutilisables.
4.1 Définition des instructions mixtes @minin
( Defining a Mixin: @mixin
)
Après avoir @mixin
ajouté 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 MixinName
pour 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
) : LorsMixin
du 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, etSass
ces 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 @content
espaces réservés, puis @include
importer le contenu suivant dans @content
la 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 Mixin
dans Sass
les bibliothèques de styles. Afin de simplifier l'utilisation, il peut être =
exprimé @mixin
par, 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
@content
important 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
)
Sass
Permet 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 sass
le format de sortie par défaut de , qui reflète clairement la CSS
relation HTML
entre et . Les sélecteurs et les attributs occupent une ligne distincte et l'indentation est sass
cohé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 CSS
rè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