Less还是Sass,Stylus我们到底选择谁

文章目录[隐藏]

less
Sass
Stylus
小结

做前端 处理，那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、个人还是倾向于Stylus，如果你以前使用了Less或Sass会很快的迁移到Stylus上来,教程比较少，推荐一个：http://www.zhangxinxu.com/jq/stylus/
9、Bootstrap4.0已结弃用了less改用Sass了。
最后，你自己使用哪一种，不应该根据国内对哪一种使用的人多来做出发参考，而是哪种更适合自己的团队。

511遇见

不一样的遇见

Less还是Sass,Stylus我们到底选择谁

less

Sass

Stylus

小结

相关文章: