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”来定义的。下面的代码示例展示了如何使用变量：

 
@def BG_COLOR rgb(235, 239, 249);<br></br>@def DIALOG_BG_COLOR BG_COLOR;
body {<br></br> background-color: BG_COLOR;<br></br>}<p>.dialog {</p><br></br> background-color: DIALOG_BG_COLOR;<br></br>}

得到的 CSS 如下：

 
body {<br></br> background-color: #ebeff9;<br></br>}<br></br>.dialog {<br></br> background-color: #ebeff9;<br></br>}

函数

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

 
@def LEFT_WIDTH 100px;<br></br>@def LEFT_PADDING 5px;<br></br>@def RIGHT_PADDING 5px;
.content {<br></br> position: absolute;<br></br> margin-left: add(LEFT_PADDING,<br></br> LEFT_WIDTH,<br></br> RIGHT_PADDING,<br></br> px);<br></br>

得到的 CSS 如下所示：

 
.content {<br></br> position: absolute;<br></br> margin-left: 110px;<br></br>}

条件语句

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

混合类型

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

 
@defmixin size(WIDTH, HEIGHT) {<br></br> width: WIDTH;<br></br> height: HEIGHT;<br></br>}<p>.image {</p><br></br> @mixin size(200px, 300px);<br></br>}

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

复制代码

 
@defmixin gradient(POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {<br></br> background-color: FALLBACK_COLOR; /* fallback color if gradients are not supported */<br></br> background-image: -webkit-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* Chrome 10+,Safari 5.1+ */<br></br> /* @alternate */ background-image: -moz-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* FF3.6+ */<br></br> /* @alternate */ background-image: -ms-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* IE10 */<br></br> /* @alternate */ background-image: -o-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* Opera 11.10+ */<br></br>}<p>.header {</p><br></br> @mixin gradient(top, 0%, 50%, 70%, #cc0000, #f07575);<br></br>}

结果如下：

复制代码

 
.header {<br></br> background-color: #f07575;<br></br> background-image: -webkit-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);<br></br> background-image: -moz-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);<br></br> background-image: -ms-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);<br></br> background-image: -o-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);<br></br>}

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

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

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