你只懂CSS？做前端你还要会 Less、Sass或Stylus

网站前端开发，CSS是必备的知识，但随着WEB项目越来越大，CSS的预处理越来越重要。

为什么需要CSS的预处理？

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等，要维护我们的CSS，工作会越来越困难，这就需要选择一个预处理工具来编译我们的CSS。

less

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。像著名的Bootstrap框架3.0+前都是使用Less的。

一个简单的Less例子：

Less文件

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

编译后CSS文件

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

从上面的例子可以看出，学习 LESS 非常容易，只要你了解 CSS 基础就可以很容易上手。
LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。

LESS的官网：http://lesscss.org

Sass

sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早的css预处理语言，比less功能更为强大。最初它是为了配合haml(是一种用来描述任何XHTML web document的标记语言)而设计的，因此有着和haml一样的缩进式风格。
sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。

变量

sass中可以定义变量，方便统一修改和维护。

//sass style
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;
body {
  font-family: $fontStack;
  color: $primaryColor;
}
//css style
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

//sass style
//-----------------------------------
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
//css style
//-----------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//sass style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}
//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

Sass官网地址：http://sass-lang.com

Stylus

在学习一个Vue.js项目的过程中，注意到源码中样式的部分并没有用熟悉的.css样式文件，而是发现了代码长得和css相像的.styl文件。搜索了下发现文件后缀是.styl的这个哥们儿学名叫stylus，是css的预处理框架。

Stylus 是一款 CSS 的预处理器，也就是我们常说的 CSS 框架。

2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

Stylus语法示例：

body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

Stylus功能上更为强壮，和js联系更加紧密。

Stylus官网：http://learnboost.github.com/stylus著作权归作者所有。

小结

１、LESS环境和使用比Sass简单
２、国内前端团队使用LESS的同学会略多于Sass
３、Sass比LESS功能略强大一些
４、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation
５、就国外讨论的热度来说，Sass绝对优于LESS
６、Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
７、个人还是倾向于Stylus，如果你以前使用了Less或Sass会很快的迁移到Stylus上来,教程比较少，推荐一个：http://www.zhangxinxu.com/jq/stylus/
8、Bootstrap4.0已结弃用了less改用Sass了。
最后，你自己使用哪一种，不应该根据国内对哪一种使用的人多来做出发参考，而是哪种更适合自己的团队。