css预处理器less,sass,stylus

什么是 CSS 预处理？为什么要有 CSS 预处理？

可以实现css变量和函数的功能 ，给我们带来动态语言所具有的优势。
less
1. less文件必须以.less结尾
2. 定义变量：@字符开头

@bgColor:#000;//定义变量

/*编译前less*/
.content{
	background:@bgColor;
}
/*编译后css*/
.content{
	background:#000;
}

3. 后代选择器 也就是说可以嵌套,添加伪类用&符号

/*编译前less*/
@bg:#000;
@fontColor:#ffff;
.content{
    width: 100px;
    height: 100px;
    background-color: @bg;
    .select{
        color:@fontColor;}
    &:after{
        content: '';
    }
    @media (min-width:768px) {
        background-color: aqua;
        
    }

}

/*编译后css*/
.content {
  width: 100px;
  height: 100px;
  background-color: #000;
}
.content .select {
  color: #ffff f;
}
.content:after {
  content: '';
}
@media (min-width: 768px) {
  .content {
    background-color: aqua;
  }

4. 函数

/*编译前less*/
.content{
    .func(100px);
}
.func(@px){
	height:@px;
}    
    
/*编译后css*/
.content{
  	height:100px;
}    
    

5. 运算
   LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。

/*编译前less*/
@border:1px;
.content{
    width: 100px;
    border: @border*3 solid red;/*运算*/
    }
/*编译后css*/
   .content{
    width: 100px;
    border: 3px solid red;/*运算*/
    } 

6. 转义字符

/*编译前less*/
@min768:~"(min-width:768px)";
.content{
   @media @min768 {
        background-color: aqua;
        
    }

}
/*编译后css*/
@media (min-width: 768px) {
  .content {
    background-color: aqua;
  }

7. 作用域

/*编译前less*/
@var: red;
.content {
  @var: white;
  .select {
    color: @var; // white
  }
}

/*编译后css*/
.content .select{
	color:white;
}

sass
sass和less主要区别:
在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
stylus