SASS
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。
Sass是一个将脚本解析成CSS的脚本语言,即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”,与Haml类似[3],使用缩进来区分代码块,并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。
SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
嵌套
编辑CSS虽然支持嵌套但是不支持代码块的嵌套,而SCSS支持。这样可更加清晰地表示元素之间的关系。
1
|
table.hl { margin: 2em 0; td.ln { text-align: right; }}li { font: { family: serif; weight: bold; size: 1.3em; }} |
会被解释成:
1
|
table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}li { font-family: serif; font-weight: bold; font-size: 1.3em;} |
在Sass文档中还可以看到有关名字空间、父级引用等的内容。
混入(Mixin)
编辑Mixin包含一段合法Sass代码,类似于C语言的宏定义。调用Mixin时,解释器会将Mixin扩展成它所包含的完整的Sass代码,因此可以有效地减少代码重复,从而写出更加干净的代码。CSS不支持Mixin,因此重复和类似的代码必须挨个书写。
1
|
@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px}}#data { @include table-base;} |
被解释成
1
|
#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;} |
libSass
编辑在2012年HTML5开发者大会上,Sass的创建者Hampton Catlin宣布libSass 1.0版。libSass是一个由Catlin、Araon Leung和Moovweb开发团队开发的开放源代码的C++实现 [1] 。Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.
libSass的设计目标是:
-
性能:开发者反映,C++的实现速度是Ruby实现的10倍。
-
兼容性:libSass的目标是与Ruby实现完全兼容。但是目标尚未完全实现。