CSS预处理器之 less和sass对比？

 less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

注释

以//开头的注释，不会被显示到css文件中

以/**/包裹的注释会被显示到css文件中

变量

使用@来申明一个变量：@pink：pink;可以作为常数来使用。

注意（如果属性值有单位一般我们都会把单位放到变量上,这样）

1.作为普通属性值只来使用：直接使用@pink

2.作为选择器和属性名URL：@{selector} @{url}的形式

3.变量的延迟加载

@num: 0;
.box{
Width:@num;
Height:@num;
}

Import 引入

@import "./reset/reset.less";

好处：只请求一次

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

.box{
    width: 300px;
    background: pink;
    a{
        float: left;
        &:hover{
           color: red;
        }
    }
    span{
         float: right;
    }
}

运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系

注意：避免编译

从语法上让编译器忽略一些操作。

.box{width:~"calc(200px + 700px)";}

混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1、不带参数的混合 

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

调用：

.box{
Width:@num;
Height:@num;
.juzhong();
}

2、带参数的混合

.juzhong（@w,@h）{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

继承

继承是对选择器的组合，而不是对样式集的复制

nav ul {
&:extend(.inline);
background: blue;
 }

循环

less本身没有循环的语法是通过递归来构建循环

.test(@n) when(@n > 0){
    .test(@n - 1);
    .box{
       width: 100px * @n;
    }
}

.test(12);

多方面对比less和sass

预处理器总结

1.嵌套可以反映层级和约束

2.变量和计算可以减少重复代码

3.Extend 和 Mixin可以复用代码片段

4.循环适用于复杂有规律的样式

5.import css文件模块化