CSS预处理器scss、less、stylus的区别

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：

• 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。

 

sass(scss) 、less、 stylus等都是css预处理器

sass：是一种动态样式语言，比css多出了很多功能（如变量，计算，混入，颜色处理，函数，继承， 嵌套等），更易阅读，扩展名.sass

　　　需要严格的遵循缩进的语法规则，不带{}和分号；　　　　

h1

　　　　　　color:red;

scss：是sass语法进行改良后的语法，兼容原来的语法，只是将原来的缩进排版方式改成了我们熟悉的{}，扩展名 .scss

　　　

　h1{

　　　　　　color:red

　　　　}

less：Less也是一种动态语言，受sass影响很大，对css赋予了动态语言的特性，如变量，计算，继承，函数等。Less既可以在客户端运行（支持IE6+），也可以在服务端运行（借助nodejs）

　

　h1{

　　　　color:red

　　}

stylus：主要是给node项目进行css预处理支持，人气不如前两个。扩展名是.styl

　　　　同时支持缩进和css常规书写方式，如下两种方式都是可以的

　　　

　h1

　　　　　　color:red

　　　　h1{

　　　　　　color:red

　　　　}

变量：sass(scss)，less，stylus等让人们收益的一个重要特性就是变量的引入，我们可以把经常使用的css属性值，定义成一个变量，然后通过变量名来引用他们。

　　sass(scss) 变量必须以$开头，变量和值之间用：隔开，如：　　　　

 $color:#fff；

　　　　h1{

　　　　　　border:1px solid $color

　　　　}

　　less变量必须以@开头，已经被赋值的变量及其他常亮（如像素，颜色等）都可以参与运算。　　　　

@color:#fff;

　　　　h1{

　　　　　　border:1px solid @color

　　　　}

　　stylus：可以以$开头或其他任何字符，但是不能以@开头。　　　

　$color = #ddd;

　　　　borderwidth = 1px;

　　　　h1{

　　　　　　border:borderwidth solid $color

　　　　}

嵌套：

　　sass(scss)，stylus，less等都支持嵌套

　　div {

　　　　ul{

　　　　　　li{

　　　　　　　　......

　　　　　　}

　　　　}

　　}

继承：

　　当我们需要为多个元素定义相同样式的时候，可以使用继承　

　.message{

　　　　border:1px solid red;

　　　　padding:10px;

　　}

　　sass中，通过@extend来实现代码组合申明，使代码更加优越整洁　　　　

.success{

　　　　　　@extend .message

　　　　　　border-color:green

　　　　}

　　less中：　　　　

.success{

　　　　　　.message

　　　　　　border-color:green

　　　　}

　　stylus中：

　　　　.success{

　　　　　　@extend .message

　　　　}

混入：

　　sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用，比如说处理css3的浏览器前缀：　　　　

@mixin error($borderwidth:2px){

　　　　　　border:$borderwidth solid red;

　　　　}

　　　　.message{

　　　　　　padding:4px;

　　　　　　@include error(5px);

　　　　}

　　

　　less中，css的混入写法：　　　　

.error(@borderwidth:2px){

　　　　　　border:@borderwidth solid red;

　　　　}

　　　　.message{

　　　　　　padding:4px;

　　　　　　.error(5px);

　　　　}

　　

　　stylus中，写法如下：　　　

　error(borderwidth=2px){

　　　　　　border:borderwidth solid red;

　　　　}

　　　　.message{

　　　　　　padding:4px;

　　　　　　error(5px)

　　　　}

区别：

　　1）编译环境不一样：

　　　　sass需要Ruby服务，是在服务端支持的

　　　　Less需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用less，编译成css，直接放到项目中。

　　　　stylus需要安装node，然后安装最新的stylus包即可。

　　2）变量符号不一样:

　　　　less是@， scss是stylus中的变量没有任何限制，可以stylus中的变量没有任何限制，可以开头，结尾的;可有可无，但变量名和变量值之间的=是需要的。stylus变量不要使用@符号开头。

　　　　变量的调用方法是完全相同的。

　　3）变量的作用域不一样

　　　　sass中，变量分为局部作用域（嵌套规则内定义的变量）和全局作用域（不在嵌套规则内定义的变量）

　　　　$width:3px;  // 全局作用域

　　　　.message{

　　　　　　$width:2px; // 局部作用域

　　　　　　border:$width solid red;

　　　　}