6款CSS前處理器 你值得擁有!

今天整理了6款值得選擇的CSS前處理器，希望對大家有幫助。

1. Sass

我們從最著名一個開始。Sass，也是我們最熟悉的，已經有8年的開源歷史專案，可以說他定義了現代CSS前處理器也不為過。

在這裡面有兩週語法可用：

• Sass: 原始語法
• SCSS: 與本地CSS相似的新語法

在 Sass中，你可以如下定義和使用變數：

$serif-font-stack: "Georgia", "Times New Roman", serif
$monospace-font-stack: "Cousin", "Courier"
 
body
font: normal18px/22px$serif-font-stack
 
pre, code
font: 600bold18px/22px$monospace-font-stack
 
等效於SCSS：
 
$serif-font-stack: "Georgia", "Times New Roman", serif;
$monospace-font-stack: "Cousin", "Courier";
 
body {
font: normal18px/22px$serif-font-stack;
}
 
pre, code{
font: 600bold18px/22px$monospace-font-stack;
}

你可以看出新的語法，與自然CSS最為相近。你可以在下面的連結找到更多說明，

• Sass Documentation

2. Less.js

Less.js, (我們常常簡稱 "Less")，現在最為流行的CSS前處理器之一。Sass強有力的競爭者。

其中一個通用特徵是mixins,在 Less 中，你可以使用類.class和.button-checkout-process來實現mixins屬性。

.button {
display: inline-block;
width: 80%;
max-width: 200px;
border-radius: 5px;
background-color: black;
color: white;
font-size: 14px;
margin: 5px;
padding: 8px;
}
 
.button-checkout- process {
.button(); /* Mixin */
background-color: silver;
}
 
Less安裝簡單。你只需要下載Less.js 檔案，放入html中即可。如下：

<!-- Reference Less JavaScript file -->
<script src="path/to/your/less.js"></script>
<link rel="stylesheet/less"type="text/css"href="your/styles.less">

• Less.js Documentation

3. Stylus

Stylus是功能豐富的CSS擴充套件，有60多種自定義函式，包括saturation()，可以推算適配CSS飽和顏色。

Stylus 可以省略花括號({}), 冒號 (:), 分號 (;)，或者直接使用純CSS。

下面來個例子：

.button
display inline-block
border-color saturation(#000, 50%)
border-radius 5px

上面的例子等效於：

.button {
display: inline-block;
border-color: #959595;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

• Stylus Interactive Playground
• Stylus Documentation

4. CSS-Crush

CSS-Crush擁有所有的主流CSS前處理器功能。

使用 CSS-Crush，需要下載並使用CssCrush.php檔案。如下：

<!--?php require_once'path/to/CssCrush.php'; ?-->

• CSS-Crush Documentation

5. Myth

Myth相容性很不錯，只要瀏覽器支援的CSS語法，使用Myth，也就不需要再去修改程式碼了。是不是非常方便。

• Myth Documentation

6. Rework

Rework是一個核心，如果你想要製作自己的CSS前處理器，那麼可能就需要他了，之前所說的Myth，也是用Rework的開源專案。

• Rework Documentation