How to use Less and Sass framework?-H5 Tutorial-php.cn

How to use Less and Sass framework?

PHP中文网

Release： 2017-06-21 14:28:56

Original

2171 people have browsed it

1. Less syntax

　1. Variable declaration:

　　@Variable name: variable value;

1 @newHeight:20px;

Copy after login

　 2. Call variables:

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

Copy after login

　3. Multiple inheritance (Mixins): Call existing classes as Own member

1 .box1 {2     .box;3 }

Copy after login

　4. Function with parameters:

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

Copy after login

　5. Nesting:(There cannot be nesting in CSS)

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

Copy after login

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

Copy after login

2. Sass/Scss syntax

Sass omitted Replace the curly brackets {} and the semicolon at the end of the statement in CSS; and use indentation and line breaks instead; files ending with ".sass";

Scss is also a form of Sass , {} and; are used in its syntax, and variables are declared using $; usually Scss is used, and files ending with ".scss" are used.

1. Variable declaration and calling:

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

Copy after login

2. Attribute nesting:

 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 }

Copy after login

3. Mixed macro:

 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 }

Copy after login

4. Inheritance:

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

Copy after login

5. Placeholder:

1 %test {2     width: 20px;3 }4 .box {5     @extend %test;6 }

Copy after login

If a class declared with a placeholder has not been called, it will not be included in the compiled " .css" file.

The above is the detailed content of How to use Less and Sass framework?. For more information, please follow other related articles on the PHP Chinese website!