Less and Sass frameworks and LessSass frameworks

Less and Sass frameworks and LessSass frameworks

1. Less syntax

　　1. Variable declaration:

@ Variable name: variable value;

1 @newHeight:20px;

　2. Call variables:

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

　　3. Multi-inheritance (Mixins ):Call an existing class as a member

1 .box1 {2     .box;3 }

　　4. Functions with parameters:

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

　　5. nesting:(No nesting exists in CSS)

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

1/* the Code in the following two formats implements the same effect */2 a {3 &: hover {4 color: red; 5} 6} 7 8: hover {9 color: red; 10}

Ii. Sass/Scss syntax

Sass removes the semicolon in CSS as the braces {} representing the scope and at the end of the statement. Instead, it uses indentation and line breaks. files ending with ". sass" are used;

Scss is also a form of Sass. It uses {} And; in syntax, and $ Declaration for variables. Generally, Scss is used for files ending with ". scss.

1. Variable declaration and call:

1/* Declaration */2 $ newWeight: 30px; 3/* call */4. box {5 width: $ newWeight; 6}

2. nested attributes:

1/* Set box1 border to the border of 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}

3. Mixed macros:

1/* declare a Mixed Macro without parameters */2 @ mixin newName {3 width: 50px; 4} 5/* call a Mixed Macro without parameters */6. box {7 @ include newName; 8} 9/* declare a Mixed Macro with parameters */10 @ mixin newName ($ newColor) {11 background-color: $ newColor; 12} 13/* call a Mixed Macro with parameters */14. box2 {15 @ include newNmae (red); 16}

4. Inheritance:

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

5. placeholders:

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

A placeholder class exists in the. CSS file.