写点什么

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:542354
用户头像

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

关注

评论

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

华为云智能监管

科技云未来

Python自学教程8-数据类型有哪些注意事项

和牛

8月月更 python数据类型

INFINI 产品更新啦 20220826

极限实验室

elasticsearch console Gateway agent INFINI Labs

Spring @Autowired 注解静态变量

HoneyMoose

leetcode 647. Palindromic Substrings回文子串(中等)

okokabcd

LeetCode 算法与数据结构

每日一 R「17」类型系统进阶(一)

Samson

学习笔记 8月月更 ​Rust

K8s 长什么样子,一文道清它的整体架构

网管

架构 k8s 后端

C/CPP基础练习题(二)简单循环(2 + 22 + 222…;斐波那契数列)

CtrlX

c c++ 8月月更

面试中的Spring,我们该怎么去回答

TimeFriends

8月月更

8月书讯 | 10 本新书上市,本本精选

图灵教育

Solana流支付协议Zebec又完成一笔850万美元融资

鳄鱼视界

豆瓣 TOP3 的 Python 书,千万别错过

图灵社区

[JS入门到进阶] 7条关于 async await 的使用口诀,新学 async await?背10遍,以后要考!快收藏

HullQin

CSS JavaScript html 前端 8月月更

(WebFlux)003、多数据源R2dbc事务失效分析

编号94530

spring 事务 spring-data-r2dbc 多数据源 SpringWebflux

关键软件密码应用研讨会|海泰方圆国产浏览器密码应用分析研究

电子信息发烧客

Spring 最常用的几个注解

HoneyMoose

论企业级微服务架构必备能力

穿过生命散发芬芳

微服务架构 8月月更

AI模型集成到业务系统的方式演化

felix

tensorflow serving 模型开发 工程

闲谈游戏项目管理——篇一:稳定生产的流程管理

南方

项目管理 游戏

Spring @Autowired 注解静态变量

HoneyMoose

头脑风暴:翻转数位

HelloWorld杰少

算法 LeetCode 8月月更

数字化智慧园区

科技云未来

中台 vs 平台

agnostic

中台

九章云极DataCanvas公司携因果学习开源重器登录WAIC!

九章云极DataCanvas

人工智能

Python 教程之数据分析(2)—— 探索性数据分析

海拥(haiyong.site)

Python 8月月更

权限认证与授权三问三答

浅羽技术

框架 CSRF 认证授权 权限验证 8月月更

让数据成为企业核心生产力

IT资讯搬运工

Spring @Repository 注解

HoneyMoose

云原生、云支持与基于云

CnosDB

时序数据库 开源社区 CnosDB infra

rocksdb无法alter的解决方案

趁早

低代码实现探索(四十九)重新梳理前端

零道云-混合式低代码平台

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