Heim >Web-Frontend >H5-Tutorial >Wie verwende ich das Less- und Sass-Framework?
1. Weniger Syntax
1. Variablendeklaration:
@Variablenname: Variablenwert; 🎜>1 @newHeight:20px;
1 .box {2 width: @newHeight;3 height: @newHeight; 4 }Aufruf hat Einige Klassen dienen als eigene Mitglieder
1 .box1 {2 .box;3 }
1 .newBox(@newWidth) {2 height: @newWidth;3 }4 .box2 {5 .newBox(20px);6 }(Verschachtelung kann in CSS nicht existieren)
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 }
Sass lässt die geschweiften Klammern {} in CSS weg, die den Gültigkeitsbereich darstellen, und verwendet stattdessen Einrückungen und Zeilenumbrüche, die mit „.sass“ enden > Scss ist ebenfalls eine Form von Sass. Seine Syntax verwendet {} und;, und Variablen werden normalerweise mit $ deklariert; es werden normalerweise Dateien verwendet, die mit „.scss“ enden.
1. Variablendeklaration und -aufruf:
2. Attributverschachtelung:
1 /*声明*/2 $newWeight: 30px;3 /*调用*/4 .box {5 width: $newWeight;6 }
3. Gemischte Makros:
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. Vererbung:
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. Platzhalter:
1 .global {2 3 outline: 1px solid red;4 }5 /*继承使用extend*/6 input[type="text"] {7 color: yellow;8 @extend .golbal;9 }
Klasse mit Platzhalter deklariert, wenn keiner vorhanden ist. Bei Aufruf der Platzhalter Die Klasse ist in der kompilierten „.css“-Datei nicht vorhanden.
Das obige ist der detaillierte Inhalt vonWie verwende ich das Less- und Sass-Framework?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!