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);@def DIALOG_BG_COLOR BG_COLOR;body { background-color: BG_COLOR; } .dialog { background-color: DIALOG_BG_COLOR; }得到的 CSS 如下：
body { background-color: #ebeff9; } .dialog { background-color: #ebeff9; }</pre>函數
Closure Stylesheets 引入了大量數學函數，使用它們你可以對數字型的值——比方說像素——進行以下操作： add ()、 sub ()、mult ()、 div ()、 min ()以及max ()。使用這些函數的示例如下：
@def LEFT_WIDTH 100px;@def LEFT_PADDING 5px;
@def RIGHT_PADDING 5px;.content {
position: absolute;
margin-left: add (LEFT_PADDING,
LEFT_WIDTH,
RIGHT_PADDING,
px);</pre> </blockquote>
得到的 CSS 如下所示：
.content {position: absolute;
margin-left: 110px;
}</pre> </blockquote>
條件語句
Closure Stylesheets 讓我們可以使用@if、@elseif 和@else，從而基于某些變量的值來創建條件語句的分支。
混合類型
混合類型是為了重用帶有參數的對結構體的聲明，如下示例所示：
@defmixin size (WIDTH, HEIGHT) {width: WIDTH;
height: HEIGHT;
}
.image {
@mixin size (200px， 300px);
}</pre> </blockquote>
當解決跨瀏覽器的問題時，混合類型會更有用：
@defmixin gradient (POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {background-color: FALLBACK_COLOR; / fallback color if gradients are not supported /
background-image: -webkit-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); / Chrome 10+,Safari 5.1+ /
/ @alternate / background-image: -moz-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); / FF3.6+ /
/ @alternate / background-image: -ms-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); / IE10 /
/ @alternate / background-image: -o-linear-gradient (POS, hsl (HSL1, HSL2, HSL3)， COLOR); / Opera 11.10+ /
}
.header {
@mixin gradient (top, 0%， 50%， 70%， #cc0000, #f07575);
}</pre> </blockquote>
結果如下：
.header {background-color: #f07575;
background-image: -webkit-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);
background-image: -moz-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);
background-image: -ms-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);
background-image: -o-linear-gradient (top,hsl (0%,50%,70%) ，#cc0000);
}</pre> </blockquote>
我們還可以使用 Closure Stylesheets 把多個 CSS 文件合并成一個，以減少代碼的規模，它會針對語法執行靜態檢查，并且知道如何交換左右兩邊的值（RTL flipping），以及如何對類進行重命名。
Closure Tools 是一組工具，其中包括編譯器、程序庫和模板，它原本是 Google 為 GMail、GDocs 和 Maps 內部使用，后來在2009年開源。我們可以使用它來處理大型 JavaScript 應用程序。
查看英文原文：Google Closure Stylesheets Makes It Easier to Work with CSS
來自: InfoQ本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！