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

     <p> Google 已经基于 Apache License 2.0 把 <a href="/misc/goto?guid=4958200218931084994">Closure Stylesheets</a> 开源，这种工具属于 <a href="/misc/goto?guid=4958200219686078247">Closure Tools</a> 包之内，在处理 CSS 的时候很有用。Closure Stylesheets 是一个 Java 程序，它向 CSS 中添加了变量、函数、条件语句以及混合类型，使得我们更易于处理大型的 CSS 文件。开发者可以使用 Google stylesheets (GSS)这种工具来生成 web 应用程序或者网站所使用的真正的 CSS 文件。</p>    <p> <strong>变量</strong></p>    <p> 变量是使用<a href="/misc/goto?guid=4958200220431070181">“@def”</a>来定义的。下面的代码示例展示了如何使用变量：</p>    <pre class="brush:css; toolbar: true; auto-links: false;">    @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>    <p> <strong>函数</strong></p>    <p> Closure Stylesheets 引入了大量数学函数，使用它们你可以对数字型的值——比方说像素——进行以下操作： <tt>add ()、 </tt><tt>sub ()、</tt><tt>mult ()、 </tt><tt>div ()、 </tt><tt>min ()</tt>以及<tt>max ()。</tt>使用这些函数的示例如下：</p>    <blockquote>     <pre class="brush:css; toolbar: true; auto-links: false;">@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>    <p> 得到的 CSS 如下所示：</p>    <blockquote>     <pre class="brush:css; toolbar: true; auto-links: false;">.content {    position: absolute;    margin-left: 110px;    }</pre>    </blockquote>    <p> <strong>条件语句</strong></p>    <p> Closure Stylesheets 让我们可以使用@if、@elseif 和@else，从而基于某些变量的值来创建条件语句的分支。</p>    <p> <strong>混合类型</strong></p>    <p> 混合类型是为了重用带有参数的对结构体的声明，如下示例所示：</p>    <blockquote>     <pre class="brush:css; toolbar: true; auto-links: false;">@defmixin size (WIDTH, HEIGHT) {    width: WIDTH;    height: HEIGHT;    }    .image {    @mixin size (200px， 300px);    }</pre>    </blockquote>    <p> 当解决跨浏览器的问题时，混合类型会更有用：</p>    <blockquote>     <pre class="brush:css; toolbar: true; auto-links: false;">@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>    <p> 结果如下：</p>    <blockquote>     <pre class="brush:css; toolbar: true; auto-links: false;">.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>    <p> 我们还可以使用 Closure Stylesheets 把多个 CSS 文件合并成一个，以减少代码的规模，它会针对语法执行静态检查，并且知道如何交换左右两边的值（RTL flipping），以及如何对类进行重命名。</p>    <p> Closure Tools 是一组工具，其中包括<a href="/misc/goto?guid=4958200221183339787">编译器</a>、<a href="/misc/goto?guid=4958200221924690501">程序库</a>和<a href="/misc/goto?guid=4958200222665766963">模板</a>，它原本是 Google 为 GMail、GDocs 和 Maps 内部使用，后来在2009年开源。我们可以使用它来处理大型 JavaScript 应用程序。</p>    <p> 查看英文原文：<a href="/misc/goto?guid=4958200223409420878">Google Closure Stylesheets Makes It Easier to Work with CSS</a></p>    <div id="come_from">           来自:     <a id="link_source2" href="/misc/goto?guid=4958200224170985226" target="_blank">InfoQ</a>    </div>