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

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

浏览次数:次 evget 2014年12月16日 字号: 大 中 小

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

  • 10个不可忽视的CSS代码片段
  • 6款CSS预处理器 你值得拥有!

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

今天慧都控件网整理了6款值得选择的CSS预处理器,希望对大家有帮助。

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

1. Sass

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

在这里面有两周语法可用:

  • Sass: 原始语法
  • SCSS: 与本地CSS相似的新语法

在 Sass中,你可以如下定义和使用变量:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

$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属性。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

<!-- Reference Less JavaScript file -->

<script src="path/to/your/less.js"></script>

<link rel="stylesheet/less" type="text/css" href="your/styles.less">

  • Less.js Documentation

3. Stylus

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

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

下面来个例子:

1

2

3

4

.button

display inline-block

border-color saturation(#000,50%)

border-radius5px

上面的例子等效于:

1

2

3

4

5

6

7

.button {

display: inline-block;

border-color:#959595;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

}

  • Stylus Interactive Playground
  • Stylus Documentation

4. CSS-Crush

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

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

1

<!--?phprequire_once 'path/to/CssCrush.php'; ?-->

  • CSS-Crush Documentation

5. Myth

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

  • Myth Documentation

6. Rework

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

  • Rework Documentation



转载请注明:http://www.soiphoto.com/fzqs/fzqs/6.html

  • 上一篇文章: 没有了
  •   
  • 下一篇文章: