6款CSS预处理器你值得拥有!-控件新闻-慧都网

6款CSS预处理器你值得拥有!

原创|对比评测|编辑：龚雪|2014-12-12 10:01:58.000|阅读 2631 次

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

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

开发工具限时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最为相近。你可以在下面的链接找到更多说明，

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中即可。如下：

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

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;
}

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

本文为慧都控件网原创，转载请注明：文章转载自：慧都控件网及原文链接：6款CSS预处理器你值得拥有!

标签：CSS

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：慧都控件网

上一篇：2014年最流行前端开发框架对比评测下一篇：Github的利弊分析

在线采购

中文文档库

试用/Demo下载

开发社群