Comment utiliser le framework Less et Sass ?

1. Moins de syntaxe

1. Déclaration de variable :

@Nom de la variable : valeur de la variable ; 🎜>

　

1 @newHeight:20px;

　2. Appel de variables :

　

1 .box {2     width: @newHeight;3     height: @newHeight;    
4 }

3. Héritage multiple (Mixins) :

L'appel a été Certaines classes servent de leurs propres membres

　

1 .box1 {2     .box;3 }

4 Fonctions avec paramètres :

1 .newBox(@newWidth) {2     height: @newWidth;3 }4 .box2 {5     .newBox(20px);6 }

>5. Imbrication :

(l'imbrication ne peut pas exister en CSS)

1 .box1 {2     height: 200px;3     width: 100px;4     .box2 {5         height: 200px;6         width: 50px;7     }8 }

 1 /*以下两种格式的代码实现的是同一种效果*/ 2 a { 3     &:hover { 4         color: red; 5     } 6 } 7  8 a:hover { 9     color: red;10 }

2. Sass/Scss syntaxe

Sass omet les accolades {} en CSS qui représentent la portée et le point-virgule à la fin de l'instruction ; utilise à la place l'indentation et les sauts de ligne se terminant par ".sass" ; > Scss est également une forme de Sass. Sa syntaxe utilise {} et ;, et les variables sont déclarées en utilisant $; Scss est généralement utilisé, et les fichiers se terminant par ".scss" sont utilisés.

1. Déclaration et appel de variables :

2. Imbrication d'attributs :

1 /*声明*/2 $newWeight: 30px;3 /*调用*/4 .box {5     width: $newWeight;6 }

3. Macros mixtes :

 1 /*将box1的border设置为1px solid red的边框*/ 2 .box1 { 3     wiodth: $newWeight; 4     border: { 5         top: 1px solid red; 6         right: 1px solid red; 7         bottom: 1px solid red; 8         left: 1px solid red; 9     }10 }

4. Héritage :

 1 /*声明不带参数的混合宏*/ 2 @mixin newName { 3     width: 50px; 4 } 5 /*调用不带参数的混合宏*/ 6 .box { 7     @include newName; 8 } 9 /*声明带参数的混合宏*/10 @mixin newName($newColor) {11     background-color: $newColor;12 }13 /*调用带参数的混合宏*/14 .box2 {15     @include newNmae(red);16 }

5. Placeholder :

1 .global {2                 3     outline: 1px solid red;4 }5 /*继承使用extend*/6 input[type="text"] {7     color: yellow;8     @extend .golbal;9 }

Classe déclarée avec placeholder, s'il n'y en a pas. En cas d'appel, l'espace réservé la classe n'existera pas dans le fichier ".css" compilé.

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!