NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

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

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

关注

评论

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

泛型真的会让程序变慢吗?(Go1.18新特性)

蔡超

golang 编程 编程、 Go 语言

AirServer2022苹果mac电脑投屏软件工具

茶色酒

AirServer

读《Software Engineering at Google》(07)

术子米德

架构师成长笔记

CNCF生态蓝图的八个领域及路线图概述

穿过生命散发芬芳

4月月更

在线脑图思维导图生成工具

入门小站

工具

Dio —— Flutter 网络请求之王者

岛上码农

flutter 移动端开发 4月月更 跨平台开发 安卓 ios

深入解析JVM-Java对象头组成

janyxe

Java JVM Java内存布局 Java对象头 Java对象组成

王者荣耀商城异地多活架构设计

Fingal

架构实战营

如何从 Java 的 List 中删除第一个元素

HoneyMoose

一文了解异步编程基础

宇宙之一粟

Python 异步编程 4月月更

学生管理系统详细架构设计文档

哈喽

「架构实战营」

EasyRecovery15数据恢复软件

茶色酒

EasyRecovery15

linux之read命令

入门小站

在线CSV转多行数据工具

入门小站

工具

消息队列存储消息数据的 MySQL 表格

AragornYang

架构训练营 架构实战营

关于OpenHarmony3.1,想随便聊一点

坚果

OpenHarmony 4月月更

[Day17]-[动态规划]打家劫舍

方勇(gopher)

LeetCode 数据结构和算法

嵌入式进阶从小白到内核大神学习全攻略(学习路线+学习书籍+练习项目)

简说Linux内核

Linux 驱动开发 嵌入式开发 linux内核、 内核工程师

残酷春天里的中国科技(二):和全球供应链一起“仰卧起坐”

脑极体

设计消息队列存储消息数据的 MySQL 表格

孙强

架构师实战营

Linux驱动开发-内核定时器

DS小龙哥

4月月更

Tuxera NTFS Mac2022磁盘读写工具

茶色酒

Tuxera NTFS Mac2022

15 张图 | 深入理解 OpenFeign 远程调用的架构原理

悟空聊架构

Feign 4月日更 悟空聊架构 openfeign 4月月更

Android C++系列:C++最佳实践4多重继承与虚继承

轻口味

c++ android 4月月更

残酷春天里的中国科技(三):持续缠绕的科技封锁线

脑极体

为什么选择学习 Sanic 框架

宇宙之一粟

4月月更 sanic

【PIMF】OpenHarmony啃论文俱乐部——“六脉神剑”详解

离北况归

OpenHarmony Openharmony啃论文俱乐部 六脉神剑

咨询公司也要挑客户吗?

秋去冬来春未远

数字化 信息化 客户 咨询

东方园林召开2022年度全员大会

科技大数据

HttpClient使用详解与实战一:普通的GET和POST请求

乌龟哥哥

4月月更

下单流程解耦新方案-你知道Spring事件监听机制吗

越长大越悲伤

事件驱动 SpringBoot 2 实战

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