做前端处理，那CSS是你的特长，随着工程的增大，CSS的预处理越来越重要，或者我们要维护我们的css，工作会越来越困难，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念这叫要我们选择一个预处理工具来编译我们的css。

less

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

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

编译后Css文件

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

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

Sass

sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。
sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和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中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

//sass style
//-----------------------------------
// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
//sass style
//-----------------------------------
// base.scss 
@import 'reset';
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
//css style
//-----------------------------------
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  background-color: #efefef;
  font-size: 100% Helvet

mixin
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}
//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

扩展/继承
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可进行简单的加减乘除运算等

//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

颜色
sass中集成了大量的颜色函数，让变换颜色更加简单。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}
//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

Stylus

CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。

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

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

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

小结
１、LESS环境较Sass简单
２、有同学说LESS使用较Sass简单
３、相对而言，国内前端团队使用LESS的同学会略多于Sass
４、从功能出发，Sass较LESS略强大一些
５、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation
６、就国外讨论的热度来说，Sass绝对优于LESS
７、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
8、Bootstrap4.0已结弃用了less改用Sass了。
最后，你自己使用哪一种，不应该根据国内对哪一种使用的人多来做出发参考，而是哪种更适合自己的团队。

less

Sass

Stylus

猜你喜欢