Google发布开源Java程序 给力CSS

Google发布开源Java程序 给力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应用程序。

 

转载于:https://www.cnblogs.com/javaitpx/archive/2012/12/17/2821693.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110252.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号