写点什么

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

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

关注

评论

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

CODING 公开课火热报名中!

CODING DevOps

项目管理 公开课 瀑布模型

手把手教你怎么高效落地敏捷开发

阿里云云效

云计算 阿里云 云原生 敏捷开发 敏捷研发

Mysql的explain,你真的会用吗?

慕枫技术笔记

数据库 3月月更

Mac 和 Windows 共享一套鼠标键盘

TroyLiu

效率 Mac windows sharemouse 共享键鼠

不想业务被中断?快来解锁华为云RDS for MySQL新特性

华为云数据库小助手

GaussDB 华为云数据库 rds for mysql

Altium Designer

謓泽

3月月更

求菩萨保佑?IT人员的系统稳定性公式

凌晞

架构 质量管理 技术管理

把效能带到游戏里!仙峰红海蜕变突破之路

阿里云云效

云计算 阿里云 云原生 敏捷开发 研发效能

微服务架构趋势下如何处理存量系统

Meta-Soft

微服务 servicemesh 边车模式

瞄准程序员招聘痛点,ShowMeBug让面试代码操作可“回放”

ShowMeBug

专注云原生落地!星汉未来成为开源 GitOps 产业联盟会员

星汉未来

云原生 智能运维

运维自动化发展的4个阶段

穿过生命散发芬芳

3月月更

企业级低代码服务编排库 - Commander

Meta-Soft

服务编排 低代码平台 服务组合

领福利 | 腾讯千帆HR数字化专场,教你数字时代的技术招聘秘笈

ShowMeBug

Kafka Kraft核心实现

Clarke

架构师作业1

小虾米

训练营作业-Module_1

Jadedev

架构实战营

功能解读|快速上手 OceanBase 数据迁移服务

OceanBase 数据库

oceanbase OMS

在线JSON转PHP Array工具

入门小站

工具

Flutter 实现更有趣的页面滚动效果

岛上码农

flutter ios 跨平台 3月月更 安卓开发

浏览器辅助神器:油猴脚本使用教程

源字节1号

前端开发 后端开发 技术分享 网站开发

怎么做需求管理,手把手教你做需求管理

阿里云云效

云计算 阿里云 项目管理 需求管理 研发敏捷

SOTA效果+一键预测,PaddleNLP带你玩转11类NLP任务

百度大脑

百度飞桨螺旋桨赋能生物医药,推动AI技术在药物研发领域的探索应用

百度大脑

2个未来技术概念:Web3.0 和元宇宙

devpoint

区块链 元宇宙 Web3.0 3月月更

任意只读文件漏洞分析

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 漏洞挖掘

TensorLayer框架开源开发者董豪老师解密人工智能开发工具的过去与未来

OpenI启智社区

人工智能 开发工具 TensorLayer

Linux之nc命令

入门小站

投稿有奖丨阿里云服务器AMD实例开发实践征文活动

阿里云弹性计算

AMD 征文活动 玩转ECS

C语言总结_格式化打印函数、字符串、运算符

DS小龙哥

3月月更

在线CSS压缩工具

入门小站

工具

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