资阳市泰智网络公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站

产品目录

联系方式

联系人:业务部
电话: 00170-875377
邮箱:service@xtxymfj.com

当前位置:首页 >> 新闻中心 >> 正文

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

字号:
摘要: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;

}

函数

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);

得到的 CSS 如下所示:

.content {

position: absolute;

margin-left: 110px;

}

条件语句

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

混合类型

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

@defmixin size (WIDTH, HEIGHT) {

width: WIDTH;

height: HEIGHT;

}

.image {

@mixin size (200px, 300px);

}

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

@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);

}

结果如下:

.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);

}

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

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

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