Sass
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。[2][3]在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。
設計者 | Hampton Catlin |
---|---|
實作者 | Natalie Weizenbaum, Chris Eppstein |
2007 | |
穩定版本 | 3.5.6
( 2018年3月23日[1]
) |
型態系統 | 动态类型 |
作業系統 | 跨平台 |
許可證 | MIT許可證 |
文件扩展名 | .sass, .scss |
網站 | sass-lang |
主要實作產品 | |
Ruby | |
啟發語言 | |
CSS, YAML, Haml, LESS | |
影響語言 | |
LESS, Stylus, Tritium |
Sass是一个将脚本解析成CSS的脚本语言,即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”,与Haml类似[4],使用缩进来区分代码块,并且用将不同规则分隔开。而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。
CSS3包括一系列选择器和伪类选择器,Sass设计了一些语法,对选择器功能进行了扩展。虽然扩展功能不是CSS的语法,但是Sass解释器会把SassScript解释成合乎CSS语法的CSS文件。此外,Sass解释器也可以对.sass或.scss文件的修改进行监视,以及时更新css文件。[5]可以认为Sass在CSS基础上加入了许多语法糖。
Sass的官方解释器是开源的并且用Ruby语言写成,但是也有用PHP、C语言、Java等实现的版本(C语言版本叫做llibSass,Java语言版本叫做JSass)。[6][7][8]
Sass中缩进是语法的一部分。SCSS是巢状元语言,一段合法的CSS代码也是一段合法的SCSS代码。Sass支持与Firefox插件Firebug集成。[9]
变量
Sass支持定义变量。变量以美元符号($)作为开头。变量用冒号(:)赋值。[9]
SassScript支持四种数据类型:[9]
变量可以用作函数的参数或返回值。[10]在解释过程中,解释器会把变量的值写入最终的CSS文件中。[4]
SCSS语法的变量示例:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 10%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Sass语法的变量示例:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 10%)
.border
padding: $margin/2
margin: $margin/2
border-color: $blue
这两段代码会被解释成:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
嵌套
CSS虽然支持嵌套但是不支持代码块的嵌套,而SCSS支持。这样可更加清晰地表示元素之间的关系。[4]
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
会被解释成:
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
在Sass文档中还可以看到有关命名空间、父级引用等的内容。[9]
混入(Mixin)
Mixin包含一段合法Sass代码,类似于C语言的宏定义。调用Mixin时,解释器会将Mixin扩展成它所包含的完整的Sass代码,因此可以有效地减少代码重复,从而写出更加干净的代码。CSS不支持Mixin,因此重复和类似的代码必须挨个书写。[4]
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
#data {
@include table-base;
}
会被解释成:
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
循环
Sass支持用@for、@each和@while语句进行迭代。
$squareCount: 3;
@for $i from 1 through $squareCount {
#square-#{$i} {
background-color: red;
width: 50px * $i;
height: 120px / $i
}
}
会被解释为:
#square-1 {
background-color: red;
width: 50px;
height: 120px;
}
#square-2 {
background-color: red;
width: 100px;
height: 60px;
}
#square-3 {
background-color: red;
width: 150px;
height: 40px;
}
参数
Mixin支持参数。[4]
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}
会被解释为:
#data {
float: left;
margin-left: 10px;
}
包含
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
会被解释为:
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
继承
CSS3支持DOM层次,但是不支持样式的继承。Sass语言通过@extend关键词实现了继承功能。[4]
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
会被解释为:
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
libSass
在2012年HTML5开发者大会上,Sass的创建者Hampton Catlin宣布libSass 1.0版。libSass是一个由Catlin、Araon Leung和Moovweb开发团队开发的开放源代码的C++实现。[7][11] Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.[12]
libSass的设计目标是:
IDE集成
参见
- LESS (层叠样式表)
- Stylus
参考
- . [2020-02-26]. (原始内容存档于2020-07-15).
- . [2013-08-30]. (原始内容存档于2013-09-01).
- . [2015-08-12]. (原始内容存档于2013-01-16).
- Media Mark(3.2.12). . Sass-lang.com. [2014-02-23]. (原始内容存档于2020-02-18).
- Sass - Syntactically Awesome Stylesheets 页面存档备份,存于 Tutorial
- . Drupal.org. [2014-02-23]. (原始内容存档于2016-03-10).
- H. Catlin. . HTML5 Developer Conference. 2012-10-15 [2013-07-11]. (原始内容存档于2014-06-24).
- . Code.google.com. [2014-02-23]. (原始内容存档于2014-02-12).
- Sass (Syntactically Awesome StyleSheets) 页面存档备份,存于 SASS_REFERENCE
- Module: Sass::Script::Functions 页面存档备份,存于 Sass Functions
- M. Catlin. . Moovweb Blog. 2012-04-30 [2013-07-11]. (原始内容存档于2013-05-08).
- C. Eppstein. . 2012-04-15 [2013-07-11]. (原始内容存档于2016-03-04).
- D. Le Nouaille. . 2013-06-07 [2013-07-11]. (原始内容存档于2013-06-18).