Sass

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。 Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。 CSS3包括一系列选择器和伪类选择器，Sass设计了一些语法，对选择器功能进行了扩展。虽然扩展功能不是CSS的语法，但是Sass解释器会把SassScript解释成合乎CSS语法的CSS文件。此外，Sass解释器也可以对.sass或.scss文件的修改进行监视，以及时更新css文件。可以认为Sass在CSS基础上加入了许多语法糖。 Sass的官方解释器是开源的并且用Ruby语言写成，但是也有用PHP、C语言、Java等实现的版本（C语言版本叫做llibSass，Java语言版本叫做JSass）。 Sass中缩进是语法的一部分。SCSS是巢状元语言，一段合法的CSS代码也是一段合法的SCSS代码。Sass支持与Firefox插件Firebug集成。 SassScript提供以下功能：变量、嵌套、混入（Mixin）、选择器继承。 Sass支持定义变量。变量以美元符号（$）作为开头。变量用冒号（:）赋值。 SassScript支持四种数据类型： 数值（可包括单位） 字符串 颜色 布尔类型 变量可以用作函数的参数或返回值。在解释过程中，解释器会把变量的值写入最终的CSS文件中。 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支持。这样可更加清晰地表示元素之间的关系。 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文档中还可以看到有关命名空间、父级引用等的内容。 Mixin包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。 @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支持参数。 @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关键词实现了继承功能。 .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; } Sass支持多重继承. 在2012年HTML5开发者大会上，Sass的创建者Hampton Catlin宣布libSass 1.0版。libSass是一个由Catlin、Araon Leung和Moovweb开发团队开发的开放源代码的C++实现。 Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well. libSass的设计目标是： 性能：开发者反映，C++的实现速度是Ruby实现的10倍。 更容易集成：因为是一个C++库，不必集成或实现Ruby解释器，因此在自行开发软件的时候事情会变得更容易。例如，libSass现在已经被应用到Node.js、Go和Ruby等环境。 兼容性：libSass的目标是与Ruby实现完全兼容。但是目标尚未完全实现。 LESS (层叠样式表) Stylus http://sass-lang.com/documentation/file.SASS_CHANGELOG.html. Latest releases. [2020-02-26]. （原始内容存档于2020-07-15）.  存档副本. [2013-08-30]. （原始内容存档于2013-09-01）.  Natalie Weizenbaum's blog. [2015-08-12]. （原始内容存档于2013-01-16）.  Media Mark（3.2.12）. Sass - Syntactically Awesome Stylesheets. Sass-lang.com. [2014-02-23]. （原始内容存档于2020-02-18）.  Sass - Syntactically Awesome Stylesheets （页面存档备份，存于互联网档案馆） Tutorial Sass / Scss. Drupal.org. [2014-02-23]. （原始内容存档于2016-03-10）.  H. Catlin. Hampton's 6 Rules of Mobile Design. HTML5 Developer Conference. 2012-10-15 [2013-07-11]. （原始内容存档于2014-06-24）.  jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting. Code.google.com. [2014-02-23]. （原始内容存档于2014-02-12）.  Sass (Syntactically Awesome StyleSheets) （页面存档备份，存于互联网档案馆） SASS_REFERENCE Module: Sass::Script::Functions （页面存档备份，存于互联网档案馆） Sass Functions M. Catlin. libsass. Moovweb Blog. 2012-04-30 [2013-07-11]. （原始内容存档于2013-05-08）.  C. Eppstein. Tweet. 2012-04-15 [2013-07-11]. （原始内容存档于2016-03-04）.  D. Le Nouaille. Sassc and Bourbon. 2013-06-07 [2013-07-11]. （原始内容存档于2013-06-18）.  官方网站 Haml/Sass Google Group（页面存档备份，存于互联网档案馆） pyScss, a Python Scss library and client（页面存档备份，存于互联网档案馆） Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git) Sass tools and resources