Sass和Less？及语法？

Sass和Less？

Sass和Less都属于CSS预处理器，Css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

官方地址：http：//lesscss.org/

VSCode插件：Easy LESS

官方地址：http：//sass-lang.com/

VSCode插件：Easy Sass

styles.less -> styles.css     往后在.less里写样式css，项目上线后再link进.css。保存.less的同时会自动生成同名字的.css。

styles.scss -> styles.css  + styles.min.css(压缩版)   (.sass是老式写法，.scss是新式写法)。

.less和.scss都是用来转化为原始的css文件。

less和sass语法？

注释：

 //单行注释，不会被编译出来（即保存的时候不会在自动生成的.css中显示出来）

 /*多行注释，就是css的注释方式，会被编译出来（即在自动生成的.css中会复制一份显示*/

变量，插值，作用域：

变量：

 .less中声明变量是用@符号,

如@num：123px；   .box { width: @num;  height: @num; }  

编译后的.css文件是 .box { width: 123px; height: 123px }

.scss中声明变量是用$符号，

如$num：123px；   .box { width: $num;  height: $num; }

编译后的结果和less的编译结果一致。

插值：

把属性作为变量的值，调用变量是用的花括号{  }

less的调用方式为：

如 @key : margin;    .box{  @{key} : auto;  }  编译后是.box{ margin: auto; }

sass的调用方式为：

如 $key : margin;    .box{  #{$key} : auto;  }  编译后是.box{ margin: auto; }

作用域：

与其他编程语言类似，块内的局部作用域与块外的全局作用域，可理解为就近原则。sass的作用域是有顺序的，不能上面的值引用的是下面才声明的变量；而less没有顺序，如：

@num：123px;  .box{ height:@num;  @num: 256px;  width: @num;  } 此时width：256px；height：256px； （就近原则取得内部的num变量值）   

选择器嵌套，伪类嵌套，属性嵌套（Sass）：

选择器嵌套：

ul{

     list-style：none；

     li{

          float：left；

          div{ margin：10px；}

          p{ margin：20px；}

    }

}  

less和sass文件生成的css都是一样的，都是我们普遍的css。

伪类嵌套：

与选择器嵌套的添加一样，也是把伪类添加到选择器下

ul{

    li{ list-style：none；}

   &：hover{ color：red；}

}

less和sass的伪类嵌套是一样的。

属性嵌套（Sass）：

注意：只有sass具有属性嵌套，less是没有的。属性嵌套指可以在选择器下将属性进行嵌套。

ul {

    li{ float：left；

      font：{  size：10px；

                  weight：bold；

                  family：宋体；

      }

   }

}

运算，单位，转义，颜色：

注意：less中顺序决定单位。sass中。如果单位不同的话，是不能进行运算的。

@num：100px；

.box{  width: @num * 3;    //单位为px

        height: 10em + @num;   //单位为em

        color：#10203；   //得出的为color：#20406

}

函数：

.box{  

     width: round( 3.6px );     //四舍五入width：4px；

     height:percentage( 0.2 );    //转化为百分比20%

     margin：random( );   //只有sass才支持random函数

     padding：sqrt(25%);   //只有less才支持开方函数

     font-size：sum( 4px, 5px);  //下面的函数调用

}

要了解具体函数还是要到官网上去看的。

还支持自定义的函数：（类似js的自定义函数）

@function sum ($n, $m) {

     @return $n + $m;    //调用方式如上所示

}

混入，命名空间（Less），继承：

混入：

less的混入： 选择器式的混入

.show{  display: block;  }    //.show选择器在编译出来的css文件里也会添加，即渲染到css里

.hide ( @color ) {       //加上括号( )的区别在于在编译后的css里不会有.hide选择器的样式，当然括号里还可以传参数

    display: none;

   color: @color;

}

.box{   

     .show;            //混入选择器的样式

     .hide( blue );       //同样为混入选择器的样式，另外color为参数蓝色blue

}

sass的混入：注意, 被混的元素不会渲染到css里,同样可以传参数。没有点 .

@mixin  show{  display：block；}

@mixin  hide( $color ) {  color: $color; }

.box{  

      width: 600px;

     @ include  show;

     @include  hide( blue );

}

命名空间（Less）：针对less操作。用#定义

#nm( ){             //nm为名字的命名

     .show{ display: inline-block; }

}

.box {  #nm.show;  }  //引入的时候要加#，前面若还有个混入式的.show, 那么#的区别体现在这里

继承：

less中的继承用的是&：extend（）;

.line {  display: inline;   }

.box1 {  &:extend (.line );  }

.box2 {  &:entend (.line );  }       

生成的css为.line, .box1, .box2 { display: inline; }  节约简化代码

sass中的继承用的是@extend  sass还有一个功能即不渲染主体则用上%号

%line {  display: inline;   }   //加上%表示只是占位作用，%改为. 表示.line是要渲染到css的

.box1 {  @extend (%line );  }   

.box2 {  @entend (%line );  }  

合并，媒体查询：

合并：指合并一些background，transform等，有以逗号或空格方式的合并

sass中的合并：类似定义一个变量

$background :   ( //数值类型、字符类型、map类型即键值对类型

     a: url (a.png),

     b: url (b.png)

);

$transform: (

     a:scale( 2)

     b: rotate(30deg)

 );

.box{

     background : map-values( &background )；   //放到函数map-values中

     //渲染后的css为background ：url ( url(a.png), ulr(b.png);

     transform：zip(map-values( $transform)...);   //渲染后是空格方式合并

}

less中的合并：

.box{

     background+ : url(a.png);   //加号表以逗号方式合并

     background+ : url(b.png);   //加号加下划线表以空格方式合并

     background+_ : scale( 2 );

     background+_ : rotate(30deg);

媒体查询：即响应式的媒体查询@media

.box{

     width:100px;

    @media all and ( min-width : 768px ) {

          width : 600px;

     }

    @media all and ( min-width : 1440px ){

         width: 900px;

     }

}

条件，循环：

条件

sass中的条件

$count : 3;

.box{

     @if( $count > 3 ){

          width: 100px + $count;

     }

    @else{

         width: 10px + $count;

     }

}

less中的条件

@count：3；

.get( @cn ) when ( @cn > 4 ){

     width: 100px + @cn;

}

.get( @cn ) when ( @cn < 4 ){

      width: 100px + @cn;

}

.box{   .get( @count);  }

循环

sass中的循环

@for $i from 0 through 2{    //指for循环中，变量$i从0循环到2，包括0和2

      .box-#{ $i } {

           width : 100px + $i;

       }

}                      

渲染后为   .box-0{ width:100px;}  .box-1{ width:101px; }   .box-2{ width:102px; }

 

less中的循环：

@count: 0;

.get(@cn) when (@cn < 3){

      .get( (@cn + 1) );    //这条语句是递归

     .box-@{ cn } {

          width: 100px + @cn;

      }

}

.get( @count );

渲染后为

.box-2 { width:102px; }   .box-1 { width: 101px; }    .box-0 { width: 100px; }

导入：

实现模块化

@import ‘ ../reset.scss’;   //less和sass的导入方式都是通过@import方式来引入

......

 sass和less叫做预处理器，即我们可以用这两个框架来开发再通过转换机制转换为浏览器认识的css