我们大家都知道html、css不属于编程语言属于标记语言，所以很难像js一样定义变量、编写方法实现模块化，而目前的css编写模式中都是定义一些公共样式类名，那一块的html需要这个样式，就去增加对应的样式类名，所以我们经常会看到一个标签上存在很多的样式类名，在这种模式中我们需要时常关注css优先级，避免样式的重叠覆盖..
为了解决css的这一困境，css预处理预编译的思想脱颖而出，比较具有代表性的有less，sass，stylus，在传统的css基础上增加了大量的新的语法，编写方式，常用的函数等，可以让css像js一样成为一门编程语言，基于less我们可以把一些经常用到的样式定义成变量或者函数，以后有需要直接调用即可，这样不仅有利于我们的开发速度，也有利于项目的后期维护与可用性
less、sass写完之后不能直接应用到页面当中，我们需要把它编译成css，然后再拿过来使用，我们把它叫做预处理
less、sass的编译有两大类 第一类：基于node环境编译less 第二类：基于浏览器环境
less、sass是一门新的语法，不能被浏览器直接识别，只是方便我们开发用的，最终我们需要把他们编译成正常的css，浏览器识别css
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。
Sass 和 SCSS 有什么区别？ 1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
sass安装 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。
当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。只需要在你的命令终端输入一行命令即可。
1、通过命令安装 Sass 打开电脑的命令终端，输入下面的命令： gem install sass sass -v //查看版本是否安装成功 gem update sass//更新到最新的sass版本 gem uninstall sass//卸载sass（不要点） ws配置路径：program：C:Ruby23-x64binsass.bat
mixin
代码语言：javascript复制@mixin alert($color:blue){
color: $color;
}
.block{
margin: 10px;
padding: 20px;
@include alert(#fff);
}扩展继承
代码语言：javascript复制.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}运算
代码语言：javascript复制.a{
width: 100px 200px;
}颜色
代码语言：javascript复制$color1:red;
.div{
background: darken($color1,10%);
}$padding:10px 5px 10px 5px;
.div{
padding: $padding;
padding-left: nth($padding,2);
}$maps:(
color:red,
background:blue
);
.div{
background: map-get($maps,background);
}@at-root .con{
//跳出嵌套
}@function dobule($cc){
@return $cc*2;
}
.ccc{
width: dobule(5px);
}$aa:8;
.c{
content: #{$aa};
}$srceen:800;
@if $srceen > 900{
body{
background: yellow;
}
}
@else {
body{
background: blue;
}
}@for $i from 1 to 5{
.span#{$i}{
width: 20% * $i;
}
}.#{content}{
background: red;
}
