比较三个 CSS 预处理器：Sass、LESS 和 Stylus（上）

前沿 :　　第一次写不够成熟，可能描述有所错误，还请你们修改指正，我会对已完成的文章进行修改。

 

1、什么是CSS预处理器

　　CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只须要使用这种语言进行编码工做，减小枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具有更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

　　CSS预处理器种类繁多，本次就以Sass、Less、Stylus进行比较。

2、语法

　　在使用CSS预处理器以前最重要的是了解语法，我只写过stylus，就从网上找了下另外两种语法的格式，与你们对比分享。

　　首先Sass和Less都是用的是标准的CSS语法，所以你能够很方便的把已完成的CSS代码转为预处理器识别的代码，Sass默认使用 .sass扩展名，而Less默认使用.Less扩展名。

一下是二者的语法

/* style.scss or style.less */
h1 {
  color: #0982C1;
}

你注意到Sass同时也支持老语法，就是不包含花括号和分号的书写格式。

/* style.sass */
h1
  color: #0982c1

然而Stylus支持的语法就更多样性，它默认使用.styl的文件扩展名，下面是Stylus语法。

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

3、变量

　　你能够在CSS预处理中声明变量，并在整个样式单中使用，支持任何类型的变量，例如：颜色、数值（是否包含单位）、文本。而后你能够任意的调取和使用该变量。Sass的变量是必须$开始，而后变量名和值要冒号隔开，跟CSS属性书写格式一致。

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
 
body {
  color: $publicColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

而Less的变量名使用@符号开始：

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
 
body {
  color: @publicColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

　　Stylus对变量名没有任何限定，你能够是$开始，也能够是任意字符，并且与变量值之间能够用冒号、空格隔开，须要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量，但其对应的值并不会赋予该变量，换句话说，在 Stylus 的变量名不要用 @ 开头。　　

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
 
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

上面三种不一样的CSS写法，最终将会生成相同结果：

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

　　最容易体现它的好处的是，假设你在CSS中使用同一种颜色数十次，若是你要修改显色，须要找到并修改十次相同的代码，而有了CSS预处理器，修改一个地方就够了。

4、嵌套

　　若是你须要在CSS中相同的parent引用多个元素，你须要一遍一遍的去写parent。例如：

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

然而若是用CSS预处理器，就能够少些不少单词，并且父节点关系一目了然。

section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
 
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

stylus还可省略花括号，书写更加方便，根据我的喜爱还可删除中间冒号。

section 
  margin: 10px;
  nav 
    height: 25px;
    a 
      color: #0982C1;
      &:hover 
        text-decoration: underline;

最终生成CSS结果是：

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

目前了解就这些，如有描述不正确地方还请你们指正，后续还会更新。

注：参考　　张鑫旭Stylue中文文档http://www.zhangxinxu.com/jq/stylus/selectors.php

　　　　　　开源中国社区：https://www.oschina.net/question/12_44255