Sass和Less（预处理器）「建议收藏」

大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说Sass和Less（预处理器）「建议收藏」,希望能够帮助大家进步!!!

Sass和Less（预处理器）

一、了解Sass和Less
二、Sass和Less 语法
- 2.1 注释
- 2.2 语法
  - 赋值
  - 插值
  - 作用域
  - 选择器嵌套、伪类嵌套、属性嵌套（Sass）
  - 运算
  - 函数
  - 混合、命名空间（Less）、继承
  - 合并、媒体查询
  - 条件判断、循环
  - 引入

一、了解Sass和Less

Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS，一个基于 Node.js 的预处理器，因著名 CSS 框架 Bootstrap 的使用而声名鹊起。此外还有 Stylus ，一种对形式无所限制的 LESS 版本。它是一种无论你想怎么样使用，大都能顺利转换成 CSS 的程序语言。

Sass和Less都属于预处理器。Less文件以.less结尾，Sass文件新版的以.scss结尾，老版的以.sass结尾。

Less文件和Sass文件都会生成css文件。

二、Sass和Less 语法

2.1 注释

在less文件中，单行注释不会再css文件中显示出来，多行注释就是css的注释方式，会在css文件中显示出来。

2.2 语法

赋值

在Less文件中，定义变量用@。

在Sass文件中，定义变量用$。

代码语言：javascript复制

@number:123px;
$number:123px;

/* 普通变量声明：直接用 $ 声明 变量执行顺序是自上而下，当下面对变量重新赋值时，会用下面的新值 */
$width:200px;
$width:100px;

/* 默认变量：在后面添加 !default 变量在执行的时候，不会根据位置执行，执行不是默认变量的值 */
$width:230px;
$width:300px !default;

/* 全局变量和局部变量 在局部变量后添加 !global ，局部变量作用域为全局变量 */
$color:red; #div1{ 
   
    color: $color;  //使用全局变量，结果 red
    // $color:orange;  //局部变量，结果是 orange
   $color:orange !global; //添加 !global 后，局部变量 变成全局变量，div2的值为 orange .box{ 
   
        background-color: $color;   //在本作用域下颜色是 orange
    }
   
}

#div2{ 
   
    background-color: $color;//
}

只听到从架构师办公室传来架构君的声音:

郑国游人未及家，洛阳行子空叹息。有谁来对上联或下联?

插值

在Less文件中定义一个值，插入进去用@{}，将定义的值放入括号中

在Less中的编译和结果

特殊变量 #{} 在Sass中，用定义值后，用#{}进行插值和值一起写入括号中。

作用域

采用就近原则，在大括号里有已经创建的变量，优先使用大括号里面的变量值。

在Less文件中，在大括号内先取值，在定义，最后显示的都是大括号内的变量值

在Sass文件中，如果先取值，在定义新变量，定义新变量之前的会使用之前的值，定义新变量后的代码会取更改后的值。Sass作用域有顺序。

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

在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。减少复杂的编译选择器代码。

伪类嵌套，需要在伪类的冒号前面加&，不然会有空格。

属性嵌套只有在Sass中有，Less没有。

代码语言：javascript复制

此代码由Java架构师必看网-架构君整理
/* 选择器嵌套 */
#div3{ 
   
    width: 300px;

    .name{ 
   
        color: aqua;
    }

    a{ 
   
        background: azure;
        // & 父类元素选择器，添加伪类选择器
        &：hover{ 
   
            color: blue;
        }
    }
}

运算

在Less加减乘除都可以做。如果进行不同单位的计算，会按照第一个单位进行计算，只计算值。

在Sass中不同单位不能进行计算，默认/是分割，不会像Less一样会认为是除号。

函数

Sass和Less有的函数可以通用，有的不行，需要去官网查询API。

round()取整，percentage()小数点换成百分数。

Sass可以自定义函数中，用function定义。Less中不能使用自定义函数

代码语言：javascript复制

/* 函数 */
$colors:(light:white,dark:black);	//map映射
//根据key获取值
@function color($key){ 
   
    @if not map-has-key($colors,$key){ 
   
        //警告@warn不会中断 sass 监听
        @warn  "在映射中没有#{$key}这个键";

        //错误@error 会中断 sass 监听
        @error "在映射中没有#{$key}这个键";
    }

    @return map-get($colors,$key);
}

//使用函数color
body{ 
   
    background: color(light);
}

混合、命名空间（Less）、继承

混入在Less中使用。样式可以单独显示，也可以在其他的杨使用混入，如果不想选择器编译出来可以在样式后面加一个()，就不会编译出来，可以在括号中进行传参。

在Sass中混入，用@mixin方法定义要混入的样式，用@include将方法混入。就是编写代码块和使用代码块。

代码语言：javascript复制

此代码由Java架构师必看网-架构君整理

/* 混合：@mixin 名称{} 引用混合： @include 名称 */

//无参混合
@mixin clear { 
   
    width: 100px;
}

#div4{ 
   
    @include clear;
}
//有参混合
@mixin col($color:red,$border:1px solid black) { 
   
    background: $color;
    border:$border ;
}

#div5{ 
   
    @include col;
    //传参
    @include col(orange)
}