CSS预编译语言

一、预编译语言简介

sass：2007年诞生，最早的CSS预处理器，拥有Ruby社区支持和Compass这一强大的Css框架，目前受less影响，已经进化到了全面兼容Css的Scss。

less：2009年出现，受sass的影响较大，但又使用css的语法，在Ruby社区之外支持者远超过sass。缺点是比起sass来，可编程功能不够，不过优点是简单和兼容Css，反过来也影响了SASS演变到了Scss的时代。

stylus：2010年产生，是Css的预处理框架，来自Node.js社区，主要用来给node项目进行css预处理支持。

二、基本使用及区别

（1）基本使用

基本一致，区别是Sass和Stylus可以用没有大括号的方式书写

（2）嵌套

语法一致，甚至连引用父级选择器的标记&也相同，区别只是Sass和Stylus可以用没有大括号的方式书写。

（3）变量声明

less声明的变量以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开。

@red:#c00;
strong{
    color:@red;
}

sass声明的变量与less类似，只是变量名前要使用$开头：

$red:#c00;
strong{
    color:$red;
}

stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量和变量值直接需要使用=。在stylus中我们不建议使用@符号开头声明变量。

red=#c00
strong
  color:red

（4）作用域

Css预编译器把变量赋予作用域，也就是存在生命周期，就像js一样，它会先从局部作用域查找变量，依次向上级作用域查找。

sass中不存在全局变量：

$color:black;
.scoped{
    $bg:blue;  
    $color:white;  
    color:$color;  
    background-color:$bg;
}
.unscoped{
   color:$color;
}

编译后，scoped中的color为white，background-color值为blue。unscoped中的color为white。

.scoped{ 
    color:white;  
    background-color:blue;
}
.unscoped{
   color:white;
}

less和stylus作用域与js相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往上查找，直到根为止。

@color:black; 
.scoped{ 
    @bg:blue; 
    @color:white;  
    color:@color;  
    background-color:@bg; 
}
.unscoped{
    color:@color;
}

编译后scoped中color为white（调用局部变量），unscoped中color为black（调用全局变量）

.scoped{   
    color:white;  （局部变量）
    background-color:blue; 
}
.unscoped{
    color:black;（全局变量）
}

（4）混入

less：在一个类A中引入另一个类B，在类B中可以使用@定义变量。

.b(@color:red){
    color:@color;
}   
.a{
    .b(red);
}

sass：需要使用@mixin。后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式。

@mixin large-text{
       font：{
            family:Arial; 
            size:20px;  
            weight:bold;
        }
        color: #ff0000;
}
.page-title{  
    @include large-text;  
    padding:4px;  
    margin-top:10px;
}

stylus中的混合和前两款css预处理语言的混合略有不同，可以不使用任何符号，就是直接声明mixin名，然后在定义参数和默认值之间用等号（=）来连接。

error(borderWidth=2px){
    border:borderWidth solid #f00; 
    color:#f00;
}
.generic-error{
    padding:20px;  
    margin:4px;  
    error();
}
.login-error{
    left:12px; 
    position:absolute; 
    top:20px;  
    error(5px);//调用error mixins，并将参数$borderWidth的值指定为5px
}

（5）代码模块化

模块化即将css代码分成一个个模块，scss、less和stylus三者的使用方法都是 @import '文件路径'