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 (235239249);
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 positionabsolute;
08  
09 margin-left: add (LEFT_PADDING,
10  
11 LEFT_WIDTH,
12  
13 RIGHT_PADDING,
14  
15 px);

  得到的 CSS 如下所示:

1 .content {
2  
3 positionabsolute;
4  
5 margin-left110px;
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 (top0%, 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);

你可能感兴趣的:(JavaScript,css,Google,dialog,Safari,tools)