AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

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

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

关注

评论

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

「智造」第15期:十问用友TimensionDB时序数据库

用友BIP

时序数据库

活动预告| 字节跳动基于DataLeap的DataOps最佳实践

字节跳动数据平台

大数据 数据治理 数据安全 数据研发 企业号12月PK榜

49 | 搜索:如何用A*搜索算法实现游戏中的寻路功能

鲁米

Spring Cloud Netflix移除后,我们又该何去何从?

木风mind

云原生 spring cloud alibaba java‘ spring cloud

火眼金睛破局ES伪慢查询 | 京东物流技术团队

京东科技开发者

数据库 慢查询 Elastic Search

基于Raft算法的DLedger-Library分析 | 京东物流技术团队

京东科技开发者

算法 分布式系统 raft DLedger

企业API网关适用业务场景

RestCloud

API 网关

拆解 2 篇文章

6点无痛早起学习的和尚

写作 21 天技术人写作行动营

防御性编程?这不就来了

越长大越悲伤

前端 后端 防御性编程

2024年企业堡垒机采购要考虑因素详解

行云管家

网络安全 堡垒机 企业堡垒机

数字化商品计划已经Out啦 揭秘哪些国际⼤牌⽤了AI智能商品计划?

第七在线

app开发

Geek_8da502

探秘AI赋能的未来世界:CyberAI深度学习技术助力变革

数新网络官方账号

人工智能 大数据

大模型那么火,教你一键Modelarts玩转开源LlaMA(羊驼)大模型

华为云开发者联盟

人工智能 华为云 华为云ModelArts 大模型 华为云开发者联盟

用友BIP数智干部管理,落实国有企业人才强企战略

用友BIP

干部管理

华秋DFM荣获第三届智能制造创新大赛全国总决赛-新技术应用赛道三等奖

华秋电子

新一代“垫图”神器,IP-Adapter的完整应用解读

京东科技技术说

人工智能

【案例】多渠道管理 第七在线智能计划帮助Calvin Klein业务精准决策

第七在线

深入理解嵌入式系统中的GPIO控制与应用

申公豹

嵌入式

深入探索嵌入式系统开发:从LED控制到物联网集成

申公豹

嵌入式

敏感信息泄漏怎么破?来试试极狐GitLab 的密钥检测吧

极狐GitLab

DevOps 安全 DevSecOps 安全左移 密钥检测

华秋荣获亿邦动力2023产业互联网千峰奖,引领电子产业数字化变革

华秋电子

第七在线引领零售供应链智能化,助力企业实现效能提升

第七在线

JS获取当前系统电量情况

南城FE

JavaScript 前端 电量计算

48 | B+树:MySQL数据库索引是如何实现的

鲁米

避坑指南之财务共享中心建设项目团队搭建

用友BIP

财务共享

数智时代,业财融合如何助力企业数智化转型?

用友BIP

业财融合

HTML5+Canvas数字孪生智慧机房可视化系统

2D3D前端可视化开发

物联网 数字孪生 三维可视化 智慧机房 智慧数据中心

嵌入式系统中的低功耗定时器应用与优化实战

申公豹

嵌入式

【腾讯云 HAI域探秘】体验大模型的多种业务应用

Hanson

DFM引领电子产业变革,智能制造助力高效生产

华秋电子

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