写点什么

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

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

关注

评论

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

XSKY发布XMotion纳管热迁移技术,OpenStack集群迁移效率提升超10倍

XSKY星辰天合

时序数据库

pydata

只用CSS实现响应式Full-Width img 2种方法

寇云

CSS css3

珍藏已久的 OS 学习网站拿出来分享给大家

苹果看辽宁体育

操作系统

Vol.8 云栖小镇游记

pyfn2030

阿里云 随笔 数字化转型

服务化构建-多维度的认识中台

图南日晟

软件工程 分层架构 架构设计

深入浅出Mysql索引的那些事儿

猿人谷

MySQL 性能优化 索引

安装R语言编译器:

唯爱

磁盘挂载

唯爱

《中国互联网简史》系列笔记之P2P

dongh11

读书笔记

服务化架构-状态码设计要点

图南日晟

微服务 RESTful 架构设计

Vol.7 聊聊我热爱的陕西省图书馆

pyfn2030

记录 生活,随想

不懂送女朋友什么牌子的口红?没关系!Python 数据分析告诉你。

JackTian

Python 程序员 数据分析 python 爬虫 口红

解决版权难题,“豪横”字体自己做

zhoo299

设计 CG

认识数据产品经理(四 与互联网产品经理的区别)

马踏飞机747

大数据 互联网 产品经理 职业规划

MySQL死锁系列-常见加锁场景分析

程序员历小冰

MySQL

【写作群星榜】5.22~5.28写作平台优秀作者&文章排名

InfoQ写作社区官方

写作平台 排行榜 热门活动

Vol.9 Web前端发展历程及前端工程化

pyfn2030

大前端

避免争执

孙苏勇

职场 随笔杂谈

Eureka 实例注册状态保持 STARTING 的问题排查

张晓辉

spring Spring Cloud netflix

超简单入门MyBatis,看了就会了~

程序员的时光

mybatis

金灿灿的季节 - Apache DolphinScheduler收获5位新Committer

代立冬

在培训机构花了好几万学Java,当了程序员还常被鄙视,这是招谁惹谁了?

四猿外

Java 学习 程序员 个人成长

控制 Pod 内容器的启动顺序

张晓辉

Kubernetes

Rust 遇上 C/C++(二):函数传参

Coding Fatty

c c++ rust 编程语言

Dataway 整合 Swagger2,让 API 管理更顺畅

哈库纳

Spring Boot DataQL Dataway Hasor

小谈校招offer选择

dongh11

职场 职业规划 应届毕业 心态 招聘

游戏夜读 | vim,vim,vim

game1night

tput命令介绍

唯爱

Java 学习笔记(三)数据类型

杜朋

ARTS|Week 1 第一次使用LeetCode

Puran

LeetCode ARTS活动

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