Less与Sass框架怎样运用？-

一、Less语法1.变量声明：@变量名:变量值;?1@newHeight:20px;2.调取变量：1.box{2width:@newHeight;3height:@newHeight;4}3.多重继承（Mixins）：调取已有的类作为本人成员1.box1{2.box;3} 一、Less语法

　　1.变量声明：

　　　　@变量名:变量值;

1 @newHeight:20px;

　　2.调取变量：

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

　　3.多重继承（Mixins）：调取已有的类作为本人成员

1 .box1 {2     .box;3 }

　　4.带参数函数：

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

　　5.嵌套：（CSS中不克不及存在嵌套）

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/Scss语法

　　Sass省略了CSS中的作为表示作用域的花括号{}和语句末尾的分号; ，改用缩进和换行；以“.sass”结尾的文件；

　　Scss也是Sass的一种情势，它的语法中运用{}和;，变量运用$声明；平常个别用Scss，以“.scss”结尾的文件。

　　1.变量声明和调取：

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

　　2.属性嵌套：

 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 }

　　3.混合宏：

 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 }

　　4.继承：

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

　　5.占位符：

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

　　用占位符声明的类，若不断没有调取，则不会在编译后的“.css”文件中存在占位符的类。

以上就是Less与Sass框架怎样运用？的细致内容，更多请关注 百分百源码网 其它相干文章！