Less Sass 原理和使用方式

 Less.js的就是在CSS的基础上增加变量，Mixin(混入）运算以及函数功能等功能。

作用是方便CSS的维护，成本和编写成本

Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。为 CSS 加入程序式语言的特性

LESS语法

可以自定义变量然后在全局样式中使用

@backgroundcolor: 100px;
#header{
backgroundcolor：@backgroundcolor;
}
#h2{
backgroundcolor：@backgroundcolor;

}

这就类似于宏定义。方便维护修改。（在实际项目开发中还是将LESS编译为静态的CSS文件然后在HTML文档中使用）

Less变量和其它编程语言一样，可以实现值的复用，同样他也有生命周期，也就是Scope（作用域），规则是先局部找，如果没找到查找上级定义，直到全局定义。

@width: 20px;
#rootDiv {
@width: 30px;
#firstDiv{
width: @width;   // 30px
}
}
#secondDiv{
width: @width; //20px
}

Mixins(混入)

很多动态语言都支持Mixins（混入）特性，它是多重继承的一种实现，在LESS中，混入是指在一个Class中引入一个已经定义的CLASS，就像在当前CLASS

中增加一个属性一样。

其实就类似与变量类似，不过这里是一个类的嵌入。

.Corners(@radius:5px){
width: @radius;
height: @radius;
border: @radius;
}
#rootDiv {
.Corners;
}
#secondDiv{
.Corners(20px);
}

转为CSS格式

.Corners(@radius:5px){
width: @radius;
height: @radius;
}
#rootDiv {
width: 5px;
height: 5px;
}
#secondDiv{
width: 20px;
height: 20px;
}

Mixins也有一个@arguments变量。@arguments在Mixins是一个很特别的参数。可以代替你省下很多代码。

重命名类似于C++的重载，避免重名,前面类似于命名空间，后面的Corners就是选择器名称

#mynamespace>.Corners {

.body {...}

.user {...}

}

Sass的作用目标和Less目前没有实践过，后续实践补充。