预处理器Less和Sass

什么是CSS预处理器

使用一种专门的编程语言，对web样式进行编码，然后再编译成正常的css文件，他对css进行扩展，比css多出来很多功能，比如变量、嵌套、混合、继承等。

less语法

（1）变量

less允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

@color: #4D926F; 
#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
}

（2）Mixins（混入）代码复用

很多动态语言都支持Mixins特性，它是多重继承的一种实现，在less中，混入是指在一个class中引入另外一个已经定义的class，就像在当前class中增加一个属性一样。

less文件

//定义一个样式选择器
.roundCorners(@radius:5px){
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
     border-radius: @radius; 
}
//在另外的样式选择器中使用
#header{
    .roundCorners;
}
#footer{
    .roundCorners(10px);
}

经过编译生成的css文件

#header { 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
#footer { 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
}

Mixins其实是一种嵌套，它允许将一个类嵌套到另外一个类中使用，被嵌套的类也可以称作变量。

（3）嵌套规则

#home{ 
  color : blue; 
  width : 600px; 
  height : 500px; 
  border:outset; 
  #top{ 
       border:outset; 
       width : 90%; 
  } 
}

less的嵌套规则的写法是与DOM结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性，同时，嵌套规则使得对伪元素的操作更加方便。

a { 
     color: red; 
     text-decoration: none; 
     &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
          color: black; 
          text-decoration: underline; 
    } 
 }

 

　　Less和Sass两者都属于css的预处理器，功能上大同小异，都是使用类似程序式语言的方式书写CSS，都具有变量、混入、嵌套、继承等特性，最终目的都是方便CSS的书写和维护。

 

缺点：需要编译成css，是一种额外的开销。