Cet article contient des notes et des enregistrements que je pense personnellement être plus couramment utilisés après avoir appris la "documentation chinoise scss". Les exemples sont directement cités à partir du texte original .
Sass est un outil auxiliaire qui renforce le CSS. Sur la base du CSS, il ajoute des fonctions avancées telles que les variables, l'imbrication, le mélange et l'importation. Ces nouvelles fonctions rendent le CSS plus puissant et plus élégant.
Sass a deux formats grammaticaux, l'un est scss ( le format utilisé dans cet article ), ce format est développé sur la base de CSS3, tous les CSS3 sont communs à scss et les fonctionnalités de sass sont ajoutées en même temps. Ce format a une extension .scss.
L'autre format de syntaxe, souvent abrégé en sass, est un format simplifié. Il utilise "indentation" au lieu d'"accolades" pour indiquer qu'un attribut appartient à un sélecteur, et "newline" au lieu de "point-virgule" pour séparer les attributs. Utilisez .sass comme extension.
Table des matières
1. Extension de la fonction CSS
1.4 Sélecteur d'espace réservé % et directive @extend
Deux, commentaires sur plusieurs lignes /* */ et commentaires sur une seule ligne //
3.1 Variable $, définition de variable !default
3.4 Instruction d'interpolation#{ }
4.2 @media、@extend、@at-root、@warn
6.2 Style mixte de référence @include
1. Extension de la fonction CSS
1.1 Règles d'imbrication
scss permet à un ensemble de styles CSS d'être imbriqué dans un autre ensemble de styles, et le style interne utilise son sélecteur externe comme sélecteur parent. La fonctionnalité d'imbrication évite la duplication des sélecteurs parents. Exemple d'utilisation :
#main {
width: 97%;
p,
div {
font-size: 2em;
a {
font-weight: bold;
}
}
pre {
font-size: 3em;
}
}
上面的css代码将编译为：
#main {
width: 97%;
}
#main p,
#main div {
font-size: 2em;
}
#main p a,
#main div a {
font-weight: bold;
}
#main pre {
font-size: 3em;
}Lorsque vous utilisez des règles d'imbrication, il n'est pas recommandé d'imbriquer trop de calques, en particulier pour les pages qui peuvent avoir besoin de modifier fréquemment la mise en page du style. À définir lors de l'ajout d'autres imbrications.
1.2 Sélecteur de parents&
Dans l'imbrication de 1.1, lorsque le sélecteur parent de la couche externe de l'imbrication est nécessaire, & peut être utilisé pour représenter le sélecteur parent de la couche externe de la règle d'imbrication. S'il existe plusieurs niveaux d'imbrication, le sélecteur parent au niveau le plus externe sera transmis un niveau à la fois. Par exemple:
#main {
color: black;
&:hover {
text-decoration: underline;
}
body.firefox & {
font-weight: normal;
}
a {
font-weight: bold;
&:hover {
color: red;
}
}
}
编译为：
#main {
color: black;
}
#main:hover {
text-decoration: underline;
}
body.firefox #main {
font-weight: normal;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}Dans les règles imbriquées, & peut être suivi d'un suffixe pour devenir un sélecteur composé, et & doit être le premier caractère à ce moment. Par exemple:
#main {
color: black;
&-sidebar {
border: 1px solid;
}
}
编译为：
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}& peut être compris comme l'abréviation du sélecteur parent transmise couche par couche dans la couche externe d'imbrication, un peu comme l'instruction v-on est abrégée en @.
1.3 Imbrication des attributs
Certaines propriétés CSS suivent le même espace de noms, par exemple font-family, font-size, font-weight les deux ont font le même espace de noms que la propriété. scss permet aux propriétés d'être imbriquées dans des espaces de noms, qui peuvent également contenir leurs propres valeurs de propriété. Par exemple:
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
// 20px/24px 即为font自己的属性值，如果没有自己的属性值，则直接省略
编译为：
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold;
}
1.4 Sélecteur d'espace réservé % et directive @extend
- Utilisation de la directive @extend : si le style d'un sélecteur est presque identique à celui d'un autre style de sélecteur, à quelques différences près, @extend peut être utilisé à ce moment. La directive @extend indique à scss que le style d'un sélecteur est hérité d'un autre sélecteur. Exemple 1:
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
编译为：
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}Dans l'exemple ci-dessus, button-report et button-submit peuvent hériter de tous les styles de button-basic via @extend. button-basic est également compilé dans le fichier css lorsque button-basic n'est pas appelé via @extend.
- Sélecteur d'espace réservé% Utilisation : Il est similaire aux sélecteurs id et calss couramment utilisés, sauf que # ou . devient %. Le sélecteur d'espace réservé % doit être appelé par @extend, lorsque % est utilisé seul (non appelé par @extend), il ne sera pas compilé dans le fichier css. Exemple 2 :
%button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend %button-basic;
background-color: red;
}
.button-submit {
@extend %button-basic;
background-color: green;
color: white;
}
编译为：
.button-report, .button-submit { // 注意这里不会编译 button-basic，和示例1中有所区别
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}Deux, commentaires sur plusieurs lignes /* */ et commentaires sur une seule ligne //
scss prend en charge les commentaires css standard sur une seule ligne et sur plusieurs lignes, la différence est que le contenu des commentaires /* */ sera entièrement compilé dans le fichier css, tandis que // ne le sera pas. exemple:
/*
* 多行注释的内容
* ....
*/
.calssname1 {
color: red;
}
// 单行注释的内容
.classname2 {
color: black;
}
编译后：
/*
* 多行注释的内容
* ....
*/
.calssname1 {
color: red;
}
.classname2 {
color: black;
}Les instructions d'interpolation peuvent être écrites dans des commentaires multilignes pour générer des valeurs de variables scss :
$version: "1.2.3";
/* 输出 version #{$version} */
注：#{ } 为 scss 的插值语句
编译后：
/* 输出 version 1.2.3 */3. SasScript
En plus de css, scss fournit de nouvelles fonctionnalités appelées SassScript. SassScript peut être appliqué à n'importe quel attribut, permettant aux attributs d'utiliser des variables, des opérations arithmétiques et d'autres fonctions supplémentaires.
3.1 Variable $, définition de variable !default
Les variables commencent par un signe dollar $ ; les variables prennent en charge la portée au niveau du bloc (variables locales) et les variables définies dans les règles imbriquées ne peuvent être utilisées que dans les règles imbriquées, c'est-à-dire les variables locales définies dans un { }, et je Il peut être utilisé à l'intérieur du { }, qui est similaire aux variables locales dans js ; les variables locales peuvent être converties en variables globales avec la déclaration !global.
Vous pouvez ajouter l'instruction !default à la fin de la variable scss. Si la variable a été attachée, elle ne sera pas rattachée. Si la variable n'a pas été attachée, elle sera assignée. Par exemple:
$content: "First content";
$new_content: "First time reference" !default;
$content: "Second content?" !default;
$title: null;
$title: "新的标题" !default;
#main {
content: $content;
new-content: $new_content;
}
#main-two {
content: $title;
}
编译后：
#main {
content: "First content"; // 第一次有值，不会被第二次的替换
new-content: "First time reference";
}
#main-two {
content: "新的标题"; // 第一次为null，则会取第二次的值
}3.2 Types de données
SassScript prend en charge 6 types de données :
- Nombres, tels que 1, 1px
- Chaînes, y compris les chaînes entre guillemets et sans guillemets, telles que "a", b
- Couleur, telle que rouge, #000000, rgba(0, 0, 0, 0.2)
- booléen
- nul
- tableau, avec des espaces ou des virgules comme délimiteurs
- cartes, équivalent à objet en js
3.3 Fonctionnement
Il n'y a pas beaucoup de différence entre l'addition, la soustraction, la multiplication et les opérations ordinaires, et la division (/) est quelque peu différente. Le symbole de division / est généralement utilisé pour séparer les nombres en CSS. Il existe trois cas / sera considéré comme un opérateur de division :
1. Une valeur, ou une partie de valeur, est la valeur de retour d'une variable ou d'une fonction ;
2. Les valeurs sont entre parenthèses ;
3. Si la valeur fait partie d'une expression arithmétique ;
Par exemple:
P {
font: 10px/8px; // 纯CSS，不会进行除法运算
$width: 1000px;
width: $width/2; // 使用变量，会进行运算
width: round(1.5) / 2; // 使用函数, 会进行运算
height: (500px/2); // 使用了圆括号包裹，会进行运算
margin-left: 5px + 8px/2px; // 在算数表达式中，会进行运算
$font-size: 20px;
$line-height: 40px;
font: #{ $font-size }/#{ line-height } // 要使用变量，又要使/不进行运算，可以将变量用#{}包裹
}
编译后：
P {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
font: 20px/40px;
}D'autres opérations, telles que les couleurs et les chaînes, ne sont pas particulièrement utilisées, il n'est donc pas nécessaire de créer des enregistrements spéciaux. Si vous souhaitez en savoir plus, vous pouvez accéder au texte d'origine à afficher.
3.4 Instruction d'interpolation#{ }
Les variables peuvent être utilisées dans les sélecteurs, les noms d'attributs et les commentaires multilignes via des instructions d'interpolation #{ }, et peuvent être utilisées dans les valeurs d'attribut pour éviter que scss n'exécute des expressions de calcul (voir les exemples dans les opérations de division). Exemple:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
/* 使用变量的注释 #{$name} */
编译后：
p.foo {
border-color: blue;
}
/* 使用变量的注释 foo */4. @-Règle et directives
4.1 @importation
Normalement, @import rechercherait des fichiers scss et les importerait, mais dans les cas suivants, @import n'est qu'une instruction CSS normale et n'importera aucun fichier .scss :
- L'extension de fichier est .css
- Le nom du fichier commence par http://
- URL du nom de fichier()
- @import contient des requêtes multimédias
Si ce n'est pas dans les quatre cas ci-dessus, le fichier avec l'extension .scss sera importé. Si aucune extension n'est spécifiée, scss recherchera un fichier du même nom avec une extension .scss et l'importera.
@import "foo.scss"; 或 @import "foo";
都会导入 foo.scss 文件
不会导入 .scss 文件的四种情况例子：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
编译后：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);scss permet d'importer plusieurs fichiers en même temps, par exemple :
@import "rounded-corners", "text-shadow";
会同时导入 rounded-corners.scss , text-shadow.scss 两个文件Vous pouvez également utiliser #{ } pour importer des fichiers, mais au lieu d'importer dynamiquement des fichiers scss via des variables, il ne peut être utilisé que dans la méthode d'importation de url(),
Par exemple:
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
编译后：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");4.2 @media、@extend、@at-root、@warn
Cette partie de l'article d'origine comprend également des instructions telles que @media, @extend, @at-root et @warn. Les personnes intéressées peuvent lire l'article d'origine.
5. Consignes de contrôle
Les commandes de contrôle sont rarement utilisées et sont principalement utilisées en conjonction avec les commandes mixin.
5.1 @si
@if est similaire à l'utilisation de if dans js. Lorsque la condition est remplie, le code correspondant est généré. Comme le if dans js, @if peut également être suivi d'un @else ou de plusieurs @else if. Par exemple:
P {
@if 1 + 1 == 2 {
border: 1px solid;
}
@if 5 < 3 {
border: 2px dotted;
}
@if null {
border: 3px double;
}
}
$type: monster;
.name {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译后：
P {
border: 1px solid;
}
.name {
color: green;
}5.2 @pour
La directive @for peut répéter le format de sortie dans une plage limitée et peut produire des résultats différents à chaque fois selon les besoins (la valeur de la variable). Les deux formes de @for inclusion et la différence dans leur utilisation :
- @pour $var de <début> à <fin>, la plage de sortie comprend <début> et <fin>
- @pour $var de <début> à <fin>, la plage de sortie inclut uniquement <début>, à l'exclusion de <fin>
Dans les deux formats ci-dessus, $var peut être n'importe quel nom de variable, et <start> et <end> doivent être des valeurs entières. exemple:
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
@for $j from 1 to 3 {
.info-#{$j} {
height: 1em * $j;
}
}
编译后：
// through 方式含头尾
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
// to 方式含头不含尾
.info-1 {
height: 1em;
}
.info-2 {
height: 2em;
}5.3 @chacun
Le format de la directive @each est : @each $var dans <list>, $var peut être n'importe quel nom de variable et <list> est une liste de valeurs. @each applique la variable $var à chaque élément de la liste, puis affiche le résultat, par exemple :
@each $animal in puma, sea-slug {
.#{$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");
}@each peut également utiliser plusieurs variables, telles que @each $var1, $var2 ..., chaque élément de la sous-liste dans la liste suivante sera affecté à la variable correspondante. exemple:
@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;
}6. Instructions mixtes @mixin
@maxin est utilisé pour définir des styles réutilisables et éviter d'utiliser des noms de classe non sémantiques. Les instructions mixtes peuvent contenir toutes les règles CSS, la plupart des règles SCS, et même introduire des variables via des paramètres pour produire divers styles.
6.1 Définir @mixin
Format d'utilisation de @mixin : @nom du mixin{style}. exemple:
6.2 Style mixte de référence @include
Le @mixin défini est référencé par @include, format : @include nom du mixin. Les styles mixtes peuvent également être référencés au niveau le plus externe, les propriétés ne sont pas définies directement et les sélecteurs parents ne peuvent pas être utilisés.
exemple:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links; // 在最外层引用
编译后：
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
a {
color: blue;
background-color: red;
}6.3 Paramètres
Lors de la définition de @maxin, vous pouvez définir des paramètres et définir la valeur par défaut des paramètres. La méthode d'écriture est similaire à celle des fonctions. exemple:
@mixin sexy-border($color, $width: 1in) {
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;
}7. Autre contenu
L'instruction de fonction @function et le format de sortie (:nested, :expanded, :compact, :compressed) ne sont généralement pas très utilisés. Si vous êtes intéressé, vous pouvez voir le lien d'origine Sass Chinese Document SCSS Chinese Document Kanyun