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

2024-02-10 01:38

本文主要是介绍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);
12  
13 }

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

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

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

这篇关于Google Closure Stylesheets 让我们更易于使用CSS的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/695817

相关文章

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语

Linux系统之lvcreate命令使用解读

《Linux系统之lvcreate命令使用解读》lvcreate是LVM中创建逻辑卷的核心命令,支持线性、条带化、RAID、镜像、快照、瘦池和缓存池等多种类型,实现灵活存储资源管理,需注意空间分配、R... 目录lvcreate命令详解一、命令概述二、语法格式三、核心功能四、选项详解五、使用示例1. 创建逻

在Java中使用OpenCV实践

《在Java中使用OpenCV实践》用户分享了在Java项目中集成OpenCV4.10.0的实践经验,涵盖库简介、Windows安装、依赖配置及灰度图测试,强调其在图像处理领域的多功能性,并计划后续探... 目录前言一 、OpenCV1.简介2.下载与安装3.目录说明二、在Java项目中使用三 、测试1.测

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()?它的作用是什么?类比一下:二、join()的作用总结三、join()怎么

mybatis中resultMap的association及collectio的使用详解

《mybatis中resultMap的association及collectio的使用详解》MyBatis的resultMap定义数据库结果到Java对象的映射规则,包含id、type等属性,子元素需... 目录1.reusltmap的说明2.association的使用3.collection的使用4.总

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe