CSS预处理器可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，这些工具对于哪些需要大量样式表和样式规则的大型用户界面是非常有帮助的。

今天济南网站建设整理了6款值得选择的CSS预处理器，希望对大家有帮助。

1. Sass

我们从最著名一个开始。Sass，也是我们最熟悉的，已经有8年的开源历史项目，可以说他定义了现代CSS预处理器也不为过。

在这里面有两周语法可用：
•Sass: 原始语法
•SCSS: 与本地CSS相似的新语法

在 Sass中，你可以如下定义和使用变量：

01.$serif-font-stack: "Georgia", "Times New Roman", serif
 
02.$monospace-font-stack: "Cousin", "Courier"
 
03.

04.body
 
05.font: normal 18px/22px $serif-font-stack
 
06.

07.pre, code
 
08.font: 600 bold 18px/22px $monospace-font-stack
 
09.

10.等效于SCSS：
 
11.

12.$serif-font-stack: "Georgia", "Times New Roman", serif;
 
13.$monospace-font-stack: "Cousin", "Courier";
 
14.

15.body {
 
16.font: normal 18px/22px $serif-font-stack;
 
17.}
 
18.

19.pre, code {
 
20.font: 600 bold 18px/22px $monospace-font-stack;
 
21.}

你可以看出新的语法，与自然CSS最为相近。你可以在下面的链接找到更多说明，
•Sass Documentation
 
2. Less.js

Less.js, (我们常常简称 "Less")，现在最为流行的CSS预处理器之一。Sass强有力的竞争者。

其中一个通用特征是mixins,在 Less 中，你可以使用类.class和.button-checkout-process来实现mixins属性。

01..button {
 
02.display: inline-block;
 
03.width: 80%;
 
04.max-width: 200px;
 
05.border-radius: 5px;
 
06.background-color: black;
 
07.color: white;
 
08.font-size: 14px;
 
09.margin: 5px;
 
10.padding: 8px;
 
11.}
 
12.

13..button-checkout- process {
 
14..button(); /* Mixin */
 
15.background-color: silver;
 
16.}
 
17.

18.Less安装简单。你只需要下载Less.js 文件，放入html中即可。如下：
 
19.

20.

21.<!-- Reference Less JavaScript file -->
 
22.<script src="path/to/your/less.js"></script>
 
23.<link rel="stylesheet/less" type="text/css" href="http://www.jinanwangzhanjianshe.com/styles.less">
•Less.js Documentation
 
3. Stylus

Stylus是功能丰富的CSS扩展，有60多种自定义函数，包括saturation()，可以推算适配CSS饱和颜色。

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

下面来个例子：

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

上面的例子等效于：

01..button {
 
02.display: inline-block;
 
03.border-color: #959595;
 
04.-webkit-border-radius: 5px;
 
05.-moz-border-radius: 5px;
 
06.border-radius: 5px;
 
07.}
•Stylus Interactive Playground
•Stylus Documentation
 
4. CSS-Crush

CSS-Crush拥有所有的主流CSS预处理器功能。

使用 CSS-Crush，需要下载并使用CssCrush.php文件。如下：

01.<!--?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

     以上【 CSS预处理器 】的内容由协策网络公司（http://www.580plan.com/）为您提供，本文网址： ，转载请注明出处，更多有关上海网站建设，网站优化、微信网站制作(微官网)、手机app开发、商业摄影、企业宣传片制作、400电话、电商代运营等互联网应用服务都可以联系我们。热线：51085186或致电18018609689王经理。

     协策网络公司每天都会不定时更新有关网站建设以及网络营销推广的文章，希望对您有用。