Google Closure Stylesheets 让我们更易于使用CSS

　　Google 已经基于 Apache License 2.0 把 Closure Stylesheets 开源，这种工具属于 Closure Tools 包之内，在处理 CSS 的时候很有用。Closure Stylesheets 是一个 Java 程序，它向 CSS 中添加了变量、函数、条件语句以及混合类型，使得我们更易于处理大型的 CSS 文件。开发者可以使用 Google stylesheets (GSS)这种工具来生成 web 应用程序或者网站所使用的真正的 CSS 文件。

　　变量

　　变量是使用“@def”来定义的。下面的代码示例展示了如何使用变量：

01	@def BG_COLOR rgb (235, 239, 249);

02

03	@def DIALOG_BG_COLOR BG_COLOR;body {

04

05	background-color: BG_COLOR;

06

07

}

08

09

.dialog {

10

11	background-color: DIALOG_BG_COLOR;

12

13

}

14

15	得到的 CSS 如下：

16

17

body {

18

19	background-color: #ebeff9;

20

21

}

22

23

.dialog {

24

25	background-color: #ebeff9;

26

27

}

　　函数

　　Closure Stylesheets 引入了大量数学函数，使用它们你可以对数字型的值——比方说像素——进行以下操作： add ()、 sub ()、mult ()、 div ()、 min ()以及max ()。使用这些函数的示例如下：

01	@def LEFT_WIDTH 100px;

02

03	@def LEFT_PADDING 5px;

04

05	@def RIGHT_PADDING 5px;.content {

06

07	position: absolute;

08

09	margin-left: add (LEFT_PADDING,

10

11	LEFT_WIDTH,

12

13	RIGHT_PADDING,

14

15

px);

　　得到的 CSS 如下所示：

1	.content {

2

3	position: absolute;

4

5	margin-left: 110px;

6

7

}

　　条件语句

　　Closure Stylesheets 让我们可以使用@if、@elseif 和@else，从而基于某些变量的值来创建条件语句的分支。

　　混合类型

　　混合类型是为了重用带有参数的对结构体的声明，如下示例所示：

01	@defmixin size (WIDTH, HEIGHT) {

02

03	width: WIDTH;

04

05	height: HEIGHT;

06

07

}

08

09

.image {

10

11	@mixin size (200px， 300px);

12

13

}

　　当解决跨浏览器的问题时，混合类型会更有用：

01	@defmixin gradient (POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {

02

03	background-color: FALLBACK_COLOR; /* fallback color if gradients are not supported */

04

05	background-image: -webkit-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); /* Chrome 10+,Safari 5.1+ */

06

07	/* @alternate */ background-image: -moz-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); /* FF3.6+ */

08

09	/* @alternate */ background-image: -ms-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); /* IE10 */

10

11	/* @alternate */ background-image: -o-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); /* Opera 11.10+ */

12

13

}

14

15

.header {

16

17	@mixin gradient (top, 0%， 50%， 70%， #cc0000, #f07575);

18

19

}

　　结果如下：

view source

print ?

01

.header {

02

03	background-color: #f07575;

04

05	background-image: -webkit-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);

06

07	background-image: -moz-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);

08

09	background-image: -ms-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);

10

11	background-image: -o-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);

12

13

}

　　我们还可以使用 Closure Stylesheets 把多个 CSS 文件合并成一个，以减少代码的规模，它会针对语法执行静态检查，并且知道如何交换左右两边的值（RTL flipping），以及如何对类进行重命名。

　　Closure Tools 是一组工具，其中包括编译器、程序库和模板，它原本是 Google 为 GMail、GDocs 和 Maps 内部使用，后来在2009年开源。我们可以使用它来处理大型 JavaScript 应用程序。

　　查看英文原文：Google Closure Stylesheets Makes It Easier to Work with CSS