Heim >Web-Frontend >H5-Tutorial >Wie verwende ich das Less- und Sass-Framework?

Wie verwende ich das Less- und Sass-Framework?

PHP中文网
PHP中文网Original
2017-06-21 14:28:562185Durchsuche

1. Weniger Syntax

1. Variablendeklaration:

@Variablenname: Variablenwert; 🎜>

 
 2. Aufrufende Variablen:
1 @newHeight:20px;

 
3. Mehrfachvererbung (Mixins):
1 .box {2     width: @newHeight;3     height: @newHeight;    
4 }
Aufruf hat Einige Klassen dienen als eigene Mitglieder

 
4. Funktionen mit Parametern:
1 .box1 {2     .box;3 }

>5. Verschachtelung:
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 }
2. Sass/Scss Syntax
 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn