Home > Web Front-end > H5 Tutorial > How to use Less and Sass framework?

How to use Less and Sass framework?

PHP中文网
Release: 2017-06-21 14:28:56
Original
2208 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template