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

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

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

概述：CSS preprocessor （CSS预处理器）可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的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最为相近。你可以在下面的链接找到更多说明，

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

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果

文章转载自：慧都控件网

好文不易，鼓励一下吧！

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

登录慧都网发表评论

暂无评论...

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

开发工具限时5折啦，一定要去看看

2. Less.js

3. Stylus

4. CSS-Crush

5. Myth

6. Rework

用科技创就卓越

Create excellence with technology

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

开发工具限时5折啦，一定要去看看

2. Less.js

3. Stylus

4. CSS-Crush

5. Myth

6. Rework

为你推荐

用户登录

用科技创就卓越

Create excellence with technology

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