Less与Sass框架如何使用？

　　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框架如何使用？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！