写点什么

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

  • 2010-05-25
  • 本文字数:1110 字

    阅读完需:约 4 分钟

当 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

2010-05-25 20:541938
用户头像

发布了 90 篇内容, 共 35.2 次阅读, 收获喜欢 5 次。

关注

评论

发布
暂无评论
发现更多内容

诊所数字化:连锁型诊所应用远程会诊做分级诊疗

boshi

数字化医疗 七日更 28天写作

研发效能的历史和未来

李小腾

研发效能 数据驱动

Oracle sqlldr快速导入和sqluldr2快速导出

阳光下、慵懒的熊

数据库

到底什么是敏捷

Teobler

敏捷 敏捷开发 敏捷精髓 敏捷书籍

添加小助理vx:mxzFAFAFA即可!!

比伯

Java 编程 架构 面试 计算机

2021版面试必问178条性能优化建议!(Java+JVM+Redis+MySQL等)

Java架构追梦

Java 架构 面试 性能优化 金三银四跳槽

技术干货 | 趣谈哈希表优化:从规避 Hash 冲突到利⽤ Hash 冲突

百度开发者中心

算法 数据结构和算法

2021金三银四涨薪季,这些面试题都掌握了嘛?

ios 面试

简述:一款优秀的缺陷管理系统有哪些功能特点!

优秀

缺陷管理系统

Git教程--git merge命令

生之欢愉,时间同行

git 程序员 git merge

可能是Java Stream的最佳实践(二)

ES_her0

28天写作

技术干货 | 中间件技术在百度云原生测试中的应用实践

百度开发者中心

底层技术 #技术干货#

开工来面试了几十个人,一言难尽

yes

面试

DCache 分布式存储系统|K-K-Row 缓存模块的创建与使用

TARS基金会

MySQL 数据库 nosql 分布式存储 TARS

魔改出一个 Encoder | Rust 学习笔记(一)

李大狗

区块链 rust 入门

国产芯片WiFi物联网智能插座—电源功能设计

不脱发的程序猿

28天写作 二月春节不断更 智能插座 WiFi物联网智能插座 电源设计

3分钟学会如何上手supervisor看门狗

happlyfox

Linux centos7 28天写作 2月春节不断更

【文末彩蛋】数据仓库服务 GaussDB(DWS)单点性能案例集锦

华为云开发者联盟

sql 数据仓库 数据

华为云“网红”语言Python课程来啦!

华为云开发者联盟

Python

话题讨论 | 英语对IT从业人员重要吗?

happlyfox

IT 话题讨论 28天写作 2月春节不断更 话题王者

安卓软件开发教程!全世界都在问Android开发凉了吗?offer拿到手软

欢喜学安卓

android 程序员 面试 移动开发

日记 2021年2月25日(周四)

Changing Lin

2月春节不断更

话题讨论 | 在中国程序员工作是青春饭吗?

happlyfox

话题讨论 2月春节不断更 话题王者

LeetCode题解:718. 最长重复子数组,动态规划,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

常见的初级排序算法,这次全搞懂

Silently9527

Java 排序算法

使用Kong作为微服务网关

行者AI

kong

Centos7配置librdkafka运行时

happlyfox

Centos 7 28天写作 2月春节不断更

国产芯片WiFi物联网智能插座—项目简介

不脱发的程序猿

物联网 28天写作 二月春节不断更 WiFi物联网插座 智能插座

安卓天气app开发!2021年Android开发者跳槽指南,社招面试心得

欢喜学安卓

android 程序员 面试 移动开发

教你如何在Python中读,写和解析CSV文

华为云开发者联盟

Python csv

第一篇文章

棉花糖

Sass 3兼容CSS3,支持选择器继承_Ruby_Paul Blair_InfoQ精选文章