CSS预编译工具研究

一、前言

回顾计算机语言的进化史，似乎每隔几年都会诞生一个新的概念以推进计算机语言的发展。从二进制升级到指令集，从指令集再升级到编译语言。而像HTML、CSS和JavaScript这些语言都是通过浏览器来渲染的。HTML、CSS和JavaScript语言以前所未有的方式使WEB获得了巨大的成功。依靠它们，我们建立了更加庞大、更加复杂的网站，这是一件美好的事；但我们需要面对的一点是，我们要更进一步使得我们的代码易于管理和维护。其中，CSS对于易于管理和维护有着迫切的需求。CSS的简单造成了今天其代码的冗余。现在CSS准备华丽的转身了。

CSS预处理器(CSS Preprocessor)，是一种构架于CSS之上的高级语言，可以通过脚本编译生成CSS代码，其目的是为了让CSS开发者的工作更简单有趣，当前已经进入了较为成熟的阶段，基本上新的WEB开发项目大都已普遍使用。

现在最主要的选择有：

• SASS：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
• LESS：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
• Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

以上就是CSS预编译工具的一些介绍，下面我将对SASS和LESS的使用进行讲解，并分别提供一个简单的示例。

二、LESS

1. 变量

注意，由于变量只能定义一次，其本质就是“常量”。

2. 混合（Mixin）

混合是一种将一个规则集混入另一个规则集的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
`</pre>
<pre>`#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}
`</pre>

### 3\. 嵌套规则

<pre>`#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
`</pre>
<pre>`#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
`</pre>

还可以使用父选择器选择符：

<pre>`.clearfix {
  display: block;
  zoom: 1;

  &amp;:after {
    content: &quot; &quot;;
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
`</pre>

### 4\. 运算

任何数字、颜色或者变量都可以参与运算。下面是一组案例：

<pre>`@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
`</pre>

### 5\. 函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

<pre>`@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
`</pre>

### 6\. 命名空间和访问器

<pre>`#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &amp;:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}
`</pre>

使用方法：

<pre>`#header a {
  color: orange;
  #bundle &gt; .button;
}
`</pre>

### 7\. 作用域

Less中的作用域和其他语言的类似，如果在本身的作用域中找不到变量，将会从其父作用域中查找。

<pre>`@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
`</pre>

变量和混合不必在使用前声明，也可以放在后面：

<pre>`@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
`</pre>

### 8\. 注释

<pre>`/* 一个注释块
style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;
`</pre>

### 9\. 导入

你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

<pre>`@import &quot;library&quot;; // library.less
@import &quot;typo.css&quot;;
`</pre>

### 10\. 其他

Mixin Guards、CSS Guards、Loop、Merge、函数式Mixin

## 三、SASS

### 1\. 变量

<pre>`$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
`</pre>

### 2\. 嵌套

<pre>`nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
`</pre>

属性嵌套：

<pre>`$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize 
`</pre>

### 3\. 分离

可以将你的样式表分隔成很多个单独的文件。然后，你可以在主样式文件中通过@import引入你所需要的.scss文件。

### 4\. 导入

<pre>`// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
`</pre>
<pre>`/* base.scss */

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
`</pre>

### 5\. 混合(Mixins)

<pre>`@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
`</pre>

### 6\. 扩展和继承

<pre>`.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;
}
`</pre>

### 7\. 运算

<pre>`.container { width: 100%; }

article[role=&quot;main&quot;] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role=&quot;complimentary&quot;] {
  float: right;
  width: 300px / 960px * 100%;
}

四、简单示例