我们大家都知道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-x64\bin\sass.bat
mixin
@mixin alert($color:blue){
color: $color;
}
.block{
margin: 10px;
padding: 20px;
@include alert(#fff);
}
扩展继承
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
运算
.a{
width: 100px+200px;
}
颜色
$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;
}
