• 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; 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应用程序。

     

  • 相关阅读:
    4、Android-数据存储方案(文件存储/SharedPreferences)
    3、Android-全局大喇叭-广播机制
    2、Android-UI(关于Nine-Patch图片)
    2、Android-UI(RecyclerView)
    2、Android-UI(自定义控件&ListView)
    2、Android-UI(布局待完成)
    2、Android-UI(常用控件)
    1、Android-活动(下)
    1、Android-活动(上)
    8、Spring Cloud-配置中心 Spring Cloud Config(待补充)
  • 原文地址:https://www.cnblogs.com/javaitpx/p/2821693.html
Copyright © 2020-2023  润新知