BT

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

Sass 3兼容CSS3,支持选择器继承

| 作者 Paul Blair 关注 0 他的粉丝 ,译者 杨晨 关注 0 他的粉丝 发布于 2010年5月26日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

当InfoQ上一次在网站上发表Sass样式表语言访谈的时候,项目维护者Nathan Weizenbaum就已经承诺未来的Sass将会在当前语法的基础上增加对类CSS的括号语法的支持。现在,Haml/Sass 3已经基本完成,预期发布时间是五月十号,其主要特性便是在Sass语法上的改变:

毫无疑问第三版的焦点将会集中在Sass上。但是我们也会将部分精力放在Haml上。不过考虑到兼容性,当前我们肯定会继续使用代码稳定的2.4版。

新Sass语法叫做SCSS(Sassy CSS),它是CSS3的一个超集

这就是说它100%兼容CSS3:每一个有效的CSS3文件也是有效的SCSS文件。不仅如此,它还支持我们能够找到的所有扩展,甚至包括一些非标准语法,例如微软的expression()函数和filter属性。
Sass使用变量、操作、嵌套选择器(selector)和Mixin来增强样式表,这些基本功能在新版本没有任何改变。 Sass修改后的语法希望能够尽量减少和CSS语法的差异,以吸引更多的用户使用。修改语法的另一个好处是可以使得CSS工具更容易支持Sass。

Sass 的旧有语法将会继续存在并且能够为旧版本用户提供良好兼容性。但是,将SCSS和CSS3强制兼容付出的一个代价就是不得不废弃Sass的一些句法特性:变量前缀的“!”号(现在使用的是“$”号)以及赋值时候的“=”号(现在是使用“:”号)。处理引号中用于显示的字符串的语法也改变了。

另外一个Sass的新特性是@extend指令,这个指令允许一个选择器继承任意选择器的所有样式

设计网页的时候经常会遇到这样的情况:一个类可能除了自己的样式外,还需要其他类的所有样式。处理这种情况最常用的办法是在HTML中使用一个泛化的类和一个特化的类。

不幸的是,这就意味着我们不得不一直牢记同时使用(例如).error和.seriousError。这将会导致沉重的维护负担,诡异的bug以及无效样式。

@extend是通过插入扩展选择器(例如.seriousError)发挥作用的,无论这个扩展选择器(例如.error)在样式表的何处出现。

迄今为止,xCSS是所有CSS编译器中对选择器完全继承特性支持最好的。但是,完全继承中最重要的一块仍然不被xCSS支持:.seriousError只能选择器恰好是.error的时候才能继承,而选择器是.error.instrusion或者.admin.error则无法继承。

Sass 3同样也支持源文件在CSS、Sass和SCSS之间相互转换,并且支持将Sass 2语法转换为Sass 3语法。

Sass::Plugin是一个在Sass文件更改时候自动更新CSS文件的工具,在新版本中性能会做出巨大提升。不仅如此,使用--watch参数,在sass命令行中可以启用自动升级功能。

Haml的改变包括HTML5自定义数据属性的生成和多行语法的简化。

查看英文原文:Sass 3 Delivers CSS Compatibility, Selector Inheritance

评价本文

专业度
风格

您好,朋友!

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

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的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通知我

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

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

讨论

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


找回密码....

Follow

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

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

Like

内容自由定制

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

Notifications

获取更新

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

BT