写点什么

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

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

关注

评论

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

转转用例平台系列 - 脑图组件2.0

转转技术团队

测试开发 测试用例平台开发

复盘:如何更好的进行技术面试

老张

面试

用好JAVA中的函数式接口,轻松从通用代码中剥离掉业务定制逻辑

程序知音

Java 编程 程序员 后端

Spring Cloud Sleuth简述

阿泽🧸

8月月更 Spring Cloud Sleuth

shell脚本之格式化输出

Albert Edison

Linux centos 运维 shell脚本编程 8月月更

vue高频面试题合集(三)附答案

helloworld1024fd

极狐GitLab冷知识:使用 Gitlab Webhook 触发 Pipeline

郭旭东

极狐GitLab JIHULAB 101

每日一R「04」常用的智能指针

Samson

8月月更 ​Rust

第一个spark应用开发详解(java版)

程序员欣宸

Java spark 8月月更

C++运算符重载(四)之赋值运算符重载

CtrlX

c++ C# 后端 函数重载 8月月更

面试官怒了:多级缓存不了解怎么行,那可是数量级的提升?

知识浅谈

缓存 8月月更

基于AQS实现自己的同步工具

自然

多线程 并发 8月月更

SRv6在5G移动网络中的部署方式

穿过生命散发芬芳

8月月更 SRv6

vue高频面试题合集(四)附答案

helloworld1024fd

Vue

软件架构治理 之 如何度量软件架构

码猿外

架构设计 软件架构治理

开源一夏 | 你不能错过的 Go 强大图形化测试工具

宇宙之一粟

开源 测试框架 testing Go 语言 8月月更

Android进阶(十一)Android系统架构讲解

No Silver Bullet

android 系统架构 8月月更

版本管理工具git的使用总结

TimeFriends

8月月更

浅谈营销型企业站文案应该如何写

石头IT视角

云原生事件驱动引擎(RocketMQ-EventBridge)应用场景与技术解析

阿里巴巴云原生

阿里云 RocketMQ 云原生

史上最全的Java并发系列之Java中的13个原子操作类

自然

多线程 并发 Java core 8月月更

估价器测试工具的实现

转转技术团队

测试工具

数据结构——栈

工程师日月

8月月更

Spring 全家桶之 Spring Data JPA(二)

小白

8月月更

编译调试插件功能总结

乌龟哥哥

8月月更

STM32入门开发 NEC红外线协议解码(超低成本无线传输方案)

DS小龙哥

8月月更

史上最全的Java并发系列之Java中的并发工具类

自然

多线程 并发 8月月更

真会玩!用手机吹气球你见过不?

岛上码农

flutter ios 前端 安卓开发 8月月更

slb与nat及eip的相关联

肖飞码字

负载均衡 NAT 弹性公网IP

RocketMQ顺序消息

急需上岸的小谢

8月月更

架构实战营模块四作业

zhihai.tu

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