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

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

概述:CSS preprocessor (CSS预处理器)可以帮助我们编写可维护的、与时俱进的代码,也可以减少需要编写的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

我们从最著名一个开始。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


Sass

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>

3. Stylus


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-Crush拥有所有的主流CSS预处理器功能。

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

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

5. Myth


Myth

Myth兼容性很不错,只要浏览器支持的CSS语法,使用Myth,也就不需要再去修改代码了。是不是非常方便。

6. Rework

Rework是一个核心,如果你想要制作自己的CSS预处理器,那么可能就需要他了,之前所说的Myth,也是用Rework的开源项目。

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



标签:CSS

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

文章转载自:慧都控件网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat