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)


相关推荐

  • pytest fixtures_pytest allure

    pytest fixtures_pytest allurefixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活,不局限于setup和teardown这几个命名conf

  • 如何求逆矩阵_副对角线矩阵的逆矩阵怎么求

    如何求逆矩阵_副对角线矩阵的逆矩阵怎么求作为一只数学基础一般般的程序猿,有时候连怎么求逆矩阵都不记得,之前在wikiHow上看了一篇不错的讲解如何求3×3矩阵的逆矩阵的文章,特转载过来供大家查询以及自己备忘。当然这个功能在matlab里面非常容易实现,只要使用inv函数或A^-1即可,但是有时候参加个考试什么的还是要笔算的哈哈~假设有如下的3×3矩阵,第一步需要求出det(M),也就是矩阵M的行列式的值。行列式的值通常显示

  • Angular面试题_angular面试

    Angular面试题_angular面试一、ng-show/ng-hide与ng-if的区别?第一点区别是,ng-if在后面表达式为true的时候才创建这个dom节点,ng-show是初始时就创建了,用display:block和display:none来控制显示和不显示。第二点区别是,ng-if会(隐式地)产生新作用域,ng-switch、ng-include等会…

  • C++11新特性之线程操作

    C++11之前没有对并发编程提供语言级别的支持,这使得我们在编写可移植的并发程序时,存在诸多的不便。现在C++11增加了线程以及线程相关的类,很方便地支持了并发编程,使得编写的多线程程序的可移植性得到

    2021年12月28日
  • XNA中的鼠标,键盘与操纵杆

    XNA中的鼠标,键盘与操纵杆

  • 如何防止135端口入侵「建议收藏」

    如何防止135端口入侵「建议收藏」
    新学期到了,许多学生都要配机,新电脑的安全防卫做好了吗?能不能拒绝成为黑客的肉鸡?令人遗憾的是,很多新手都不知道或者忽视了对敏感端口的屏蔽。例如135端口,一旦黑客利用135端口进入你的电脑,就能成功地控制你的机子。我们应该如何防范通过135端口入侵呢?下面我们就为大家来揭开谜底。

      小知识:每台互联网中的计算机系统,都会同时打开多个网络端口,端口就像出入房间的门一样。因为房间的门用于方便人们的进出,而端口则为不同的网路服务提供数据交换。正如房间的门可以放进小tou一样

    2022年10月28日

发表回复

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

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