BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Abel Avram 关注 11 他的粉丝 ,译者 侯伯薇 关注 0 他的粉丝 发布于 2011年11月20日. 估计阅读时间: 7 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

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

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

写法太高级了 by 刘 灿

呃,还没有办法接受这么高级的写法。和传统的写法差别还是蛮大的啊。

Re: 写法太高级了 by hong hao

SASS/SCSS 已经解决了这些问题 语法又简单
sass-lang.com/

如果还想改进 html 那些麻烦的 <xxx></xxx> 那就试试 haml 把
haml-lang.com/

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

2 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT