引入css预处理器,6款CSS预处理器 你值得拥有!
CSS preprocessor (CSS预处理器)可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，这些工具对于哪些需要大量样式表和样式规则的大型用户界面是非常有帮助的。
今天慧都控件网整理了6款值得选择的CSS预处理器，希望对大家有帮助。
开发工具限时5折啦，一定要去看看
【年终大促 巅峰盛"慧" 】促销火热进行中 iPhone 6 Plus、 iPhone 6、iPad Air等你拿 点我查看
慧都联合葡萄城产品年终大惠，第二套起，买一送一！11月17日-12月31日，机会不容错过！点我查看
DevExpress 14.2新版发布会 点我查看
1. Sass
我们从最著名一个开始。Sass，也是我们最熟悉的，已经有8年的开源历史项目，可以说他定义了现代CSS预处理器也不为过。
在这里面有两周语法可用：
Sass: 原始语法
SCSS: 与本地CSS相似的新语法
在 Sass中，你可以如下定义和使用变量：
$serif-font-stack: "Georgia", "Times New Roman", serif
$monospace-font-stack: "Cousin", "Courier"
body
font: normal 18px/22px $serif-font-stack
pre, code
font: 600 bold 18px/22px $monospace-font-stack
等效于SCSS：
$serif-font-stack: "Georgia", "Times New Roman", serif;
$monospace-font-stack: "Cousin", "Courier";
body {
font: normal 18px/22px $serif-font-stack;
}
pre, code {
font: 600 bold 18px/22px $monospace-font-stack;
}
你可以看出新的语法，与自然CSS最为相近。你可以在下面的链接找到更多说明，
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中即可。如下：
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;
}
4. CSS-Crush
CSS-Crush拥有所有的主流CSS预处理器功能。
使用
CSS-Crush，需要下载并使用CssCrush.php文件。如下：
5. Myth
Myth兼容性很不错，只要浏览器支持的CSS语法，使用Myth，也就不需要再去修改代码了。是不是非常方便。
6. Rework
Rework是一个核心，如果你想要制作自己的CSS预处理器，那么可能就需要他了，之前所说的Myth，也是用Rework的开源项目。
CSS
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至[email protected]
文章转载自：慧都控件网