imported>Yumeto：使用DisamAssist清理消歧義連結：Go（改連結至Go語言）。

2026-03-02T15:23:30Z

新页面

{{noteTA
|G1=IT
|G2=FL
}}
{{Infobox programming language
| name = Sass
| logo =
| year = 2007
| designer = [[Hampton Catlin]]
| developer = [[Natalie Weizenbaum]], [[Chris Eppstein]]
| latest_release_version= 3.5.6
| latest_release_date = {{Start date and age|2018|3|23}}<ref>{{Cite web |url=https://github.com/sass/sass/releases |title=Latest releases |accessdate=2020-02-26 |archive-date=2020-07-15 |archive-url=https://web.archive.org/web/20200715081805/https://github.com/sass/sass/releases |dead-url=no }}</ref>
| typing = [[动态类型]]
| implementations = [[Ruby]]
| influenced_by = [[CSS]], [[YAML]], [[Haml]], [[LESS (层叠样式表)|LESS]]
| influenced = [[LESS (层叠样式表)|LESS]], [[Stylus]], [[Tritium]]
| operating_system = [[跨平台]]
| license = [[MIT許可證]]
| website = {{URL|http://sass-lang.com/}}
| file_ext = .sass, .scss
}}
'''Sass'''（英文全称：'''S'''yntactically '''A'''wesome '''S'''tyle'''s'''heets）是一个最初由[[Hampton Catlin]]设计并由[[Natalie Weizenbaum]]开发的层叠样式表语言。<ref name="about">{{cite web |url=http://sass-lang.com/about.html |title=存档副本 |accessdate=2013-08-30 |deadurl=yes |archiveurl=https://web.archive.org/web/20130901145805/http://sass-lang.com/about.html |archivedate=2013-09-01 }}</ref><ref>{{cite web | title = Natalie Weizenbaum's blog | url = http://nex-3.com/ | deadurl = yes | archiveurl = https://web.archive.org/web/20130116174428/http://nex-3.com/ | archivedate = 2013-01-16 | accessdate = 2015-08-12 }}</ref>在开发最初版本之后，Weizenbaum和[[Chris Eppstein]]继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

Sass是一个将脚本解析成[[CSS]]的[[脚本语言]]，即SassScript。Sass包括两套[[语法#电脑语法|语法]]。最开始的语法叫做“缩进语法”，与[[Haml]]类似<ref name="main">{{cite web |author=Media Mark（3.2.12） |url=http://sass-lang.com/ |title=Sass - Syntactically Awesome Stylesheets |publisher=Sass-lang.com |date= |accessdate=2014-02-23 |archive-date=2020-02-18 |archive-url=https://web.archive.org/web/20200218093537/https://sass-lang.com/ |dead-url=no }}</ref>，使用[[缩进]]来区分代码块，并且用-{zh-cn:回车;zh-tw:換行;}-将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个[[文件扩展名]]区分开。

[[CSS#CSS 3|CSS3]]包括一系列选择器和伪类选择器，Sass设计了一些语法，对选择器功能进行了扩展。虽然扩展功能不是CSS的语法，但是Sass解释器会把SassScript解释成合乎CSS语法的CSS文件。此外，Sass解释器也可以对.sass或.scss文件的修改进行监视，以及时更新css文件。<ref name="tutorial">[http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] {{Wayback|url=http://sass-lang.com/tutorial.html |date=20131009053354 }} Tutorial</ref>可以认为Sass在CSS基础上加入了许多[[语法糖]]。

Sass的官方解释器是[[开源]]的并且用[[Ruby]]语言写成，但是也有用[[PHP]]、[[C语言]]、[[Java]]等实现的版本（C语言版本叫做llibSass，Java语言版本叫做JSass）。<ref>{{cite web |url=http://drupal.org/project/sass |title=Sass / Scss |publisher=Drupal.org |date= |accessdate=2014-02-23 |archive-date=2016-03-10 |archive-url=https://web.archive.org/web/20160310210318/https://www.drupal.org/project/sass |dead-url=no }}</ref><ref name="libsass-html5conf">{{cite web
| url=http://www.youtube.com/watch?v=j75-SslllvY&feature=player_detailpage#t=1831s
| title=Hampton's 6 Rules of Mobile Design
| publisher=HTML5 Developer Conference
| date=2012-10-15
| accessdate=2013-07-11
| author=H. Catlin
| archive-date=2014-06-24
| archive-url=https://web.archive.org/web/20140624110434/http://www.youtube.com/watch?v=j75-SslllvY&feature=player_detailpage#t=1831s
| dead-url=no
}}</ref><ref>{{cite web |url=https://code.google.com/p/jsass/ |title=jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting |publisher=Code.google.com |date= |accessdate=2014-02-23 |archive-date=2014-02-12 |archive-url=https://web.archive.org/web/20140212164914/http://code.google.com/p/jsass/ |dead-url=no }}</ref>

Sass中缩进是语法的一部分。SCSS是[[元语言#巢状元语言|巢状元语言]]，一段合法的CSS代码也是一段合法的SCSS代码。Sass支持与[[Firefox]][[add-on (Mozilla)|插件]][[Firebug]]集成。<ref name="doc">[http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)] {{Wayback|url=http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html |date=20131009060141 }} SASS_REFERENCE</ref>

SassScript提供以下功能：[[变量 (程序设计)|变量]]、嵌套、混入（Mixin）、选择器[[继承 (计算机科学)|继承]]。<ref name="main" />

== 变量 ==
Sass支持定义变量。变量以[[美元符号]]（<tt>$</tt>）作为开头。变量用冒号（<tt>:</tt>）[[指定敘述|赋值]]。<ref name="doc" />

SassScript支持四种数据类型：<ref name="doc" />

* 数值（可包括单位）
* [[字符串]]
* 颜色
* [[布爾 (數據類型)|布尔类型]]

变量可以用作函数的参数或返回值。<ref name="functions">[http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Module: Sass::Script::Functions] {{Wayback|url=http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html |date=20131012064213 }} Sass Functions</ref>在解释过程中，解释器会把变量的值写入最终的CSS文件中。<ref name="main" />

SCSS语法的变量示例：
<syntaxhighlight lang="scss">
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color: darken($blue, 10%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
</syntaxhighlight>

Sass语法的变量示例：
<syntaxhighlight lang="sass">
$blue: #3bbfce
$margin: 16px

.content-navigation
border-color: $blue
color: darken($blue, 10%)

.border
padding: $margin/2
margin: $margin/2
border-color: $blue
</syntaxhighlight>

这两段代码会被解释成：
<syntaxhighlight lang="css">
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
</syntaxhighlight>

== 嵌套 ==
CSS虽然支持嵌套但是不支持代码块的嵌套，而SCSS支持。这样可更加清晰地表示元素之间的关系。<ref name="main" />
<syntaxhighlight lang="sass">
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}

li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
</syntaxhighlight>

会被解释成：

<syntaxhighlight lang="css">
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}

li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
</syntaxhighlight>

在Sass文档中还可以看到有关命名空间、父级引用等的内容。<ref name="doc" />

== 混入（Mixin） ==
Mixin包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。<ref name="main" />

<syntaxhighlight lang="sass">
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}

#data {
@include table-base;
}
</syntaxhighlight>

会被解释成：

<syntaxhighlight lang="css">
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
</syntaxhighlight>

=== 循环 ===

Sass支持用@for、@each和@while语句进行迭代。

<syntaxhighlight lang="sass">
$squareCount: 3;
@for $i from 1 through $squareCount {
#square-#{$i} {
background-color: red;
width: 50px * $i;
height: 120px / $i
}
}

</syntaxhighlight>

会被解释为：

<syntaxhighlight lang="css">
#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;
}
</syntaxhighlight>

=== 参数 ===
Mixin支持参数。<ref name="main" />

<syntaxhighlight lang="sass">
@mixin left($dist) {
float: left;
margin-left: $dist;
}

#data {
@include left(10px);
}
</syntaxhighlight>

会被解释为：

<syntaxhighlight lang="css">
#data {
float: left;
margin-left: 10px;
}
</syntaxhighlight>

=== 包含 ===

<syntaxhighlight lang="sass">
@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;
}
</syntaxhighlight>

会被解释为：

<syntaxhighlight lang="css">
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
</syntaxhighlight>

== 继承 ==
CSS3支持[[DOM]]层次，但是不支持样式的继承。Sass语言通过@extend关键词实现了继承功能。<ref name="main" />

<syntaxhighlight lang="sass">
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
@extend .error;
border-width: 3px;
}
</syntaxhighlight>

会被解释为：

<syntaxhighlight lang="css">
.error, .badError {
border: 1px #f00;
background: #fdd;
}

.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
border-width: 3px;
}
</syntaxhighlight>

Sass支持[[多重继承]].<ref name="doc" />

==libSass==
在2012年HTML5开发者大会上，Sass的创建者Hampton Catlin宣布libSass 1.0版。libSass是一个由Catlin、Araon Leung和[[Moovweb]]开发团队开发的开放源代码的C++实现。<ref name="libsass-html5conf" /><ref name="libsass-moovweb-blog">{{cite web
| url=http://blog.moovweb.com/2012/04/libsass/
| title=libsass
| publisher=Moovweb Blog
| date=2012-04-30
| accessdate=2013-07-11
| author=M. Catlin
| deadurl=yes
| archiveurl=https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/
| archivedate=2013-05-08
}}</ref> Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.<ref>{{cite web
| url=https://twitter.com/chriseppstein/status/323845132417900544
| title=Tweet
| date=2012-04-15
| accessdate=2013-07-11
| author=C. Eppstein
| archive-date=2016-03-04
| archive-url=https://web.archive.org/web/20160304134940/https://twitter.com/chriseppstein/status/323845132417900544
| dead-url=no
}}</ref>

libSass的设计目标是：
* 性能：开发者反映，C++的实现速度是Ruby实现的10倍。<ref>{{cite web
| url=http://www.damln.com/log/sassc-and-bourbon-it-works/
| title=Sassc and Bourbon
| date=2013-06-07
| accessdate=2013-07-11
| author=D. Le Nouaille
| archive-date=2013-06-18
| archive-url=https://web.archive.org/web/20130618031838/http://www.damln.com/log/sassc-and-bourbon-it-works/
| dead-url=yes
}}</ref>
* 更容易集成：因为是一个C++库，不必集成或实现Ruby解释器，因此在自行开发软件的时候事情会变得更容易。例如，libSass现在已经被应用到[[Node.js]]、[[Go語言|Go]]和[[Ruby]]等环境。<ref name="libsass-moovweb-blog" />
* 兼容性：libSass的目标是与Ruby实现完全兼容。但是目标尚未完全实现。<ref name="libsass-html5conf" />

== IDE集成 ==
{| class="wikitable"
|-
! [[集成开发环境|IDE]] !! 软件 !! 网站
|-
|[[Adobe Dreamweaver]] CC 2017
|
|https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/{{Wayback|url=https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ |date=20161114235934 }}
|-
| [[Eclipse]] || ||
|-
| [[Emacs]] || SCSS Mode || https://github.com/antonj/scss-mode/{{Wayback|url=https://github.com/antonj/scss-mode/ |date=20160423182100 }}
|-
| [[IntelliJ_IDEA|JetBrains IntelliJ IDEA (Ultimate Edition)]] || ||https://www.jetbrains.com/idea/{{Wayback|url=https://www.jetbrains.com/idea/ |date=20150810062925 }}
|-
| [[PhpStorm|JetBrains PhpStorm]] || ||http://www.jetbrains.com/phpstorm/{{Wayback|url=http://www.jetbrains.com/phpstorm/ |date=20150811052202 }}
|-
| [[RubyMine|JetBrains RubyMine]] || ||http://www.jetbrains.com/ruby/{{Wayback|url=http://www.jetbrains.com/ruby/ |date=20150810195803 }}
|-
| [[Microsoft Visual Studio]] || Mindscape || http://www.mindscapehq.com/products/web-workbench{{Wayback|url=http://www.mindscapehq.com/products/web-workbench |date=20150812141441 }}
|-
| [[Microsoft Visual Studio]] || SassyStudio || http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d{{Wayback|url=http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d |date=20150518154328 }}
|-
| [[Microsoft WebMatrix]] || || http://www.microsoft.com/web/{{Wayback|url=http://www.microsoft.com/web/ |date=20150512042040 }}
|-
| [[NetBeans]] || || http://plugins.netbeans.org/plugin/34929/scss-support{{Wayback|url=http://plugins.netbeans.org/plugin/34929/scss-support |date=20151008054347 }}
|-
| [[Vim]] || haml.zip || http://www.vim.org/scripts/script.php?script_id=1433{{Wayback|url=http://www.vim.org/scripts/script.php?script_id=1433 |date=20150906133253 }}
|-
| [[Atom (text editor)|Atom]] || || https://github.com/atom/language-sass{{Wayback|url=https://github.com/atom/language-sass |date=20200527171559 }}
|-
| [[Visual Studio Code]] || || https://code.visualstudio.com/Docs/languages/css{{Wayback|url=https://code.visualstudio.com/Docs/languages/css |date=20200226112742 }}
|-
|[[Sublime Text|Sublime]]
|
|https://github.com/P233/Syntax-highlighting-for-Sass{{Wayback|url=https://github.com/P233/Syntax-highlighting-for-Sass |date=20200319082654 }}
|-
| [[Edit+]] || || https://www.editplus.com/others.html{{Wayback|url=https://www.editplus.com/others.html |date=20200226112742 }}
|}

==参见==
*[[LESS (层叠样式表)]]
*[[Stylus]]

== 参考 ==
{{Reflist|2}}

== 外部链接 ==
* {{Official website}}
* [https://groups.google.com/group/haml Haml/Sass Google Group]{{Wayback|url=https://groups.google.com/group/haml |date=20130526040003 }}
* [https://github.com/Kronuz/pyScss pyScss, a Python Scss library and client]{{Wayback|url=https://github.com/Kronuz/pyScss |date=20150610125956 }}
* [https://github.com/hapztron/sai Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git) ]
* [https://web.archive.org/web/20150323061242/http://www.logogulf.ae/blog/sass-tools-and-resources/ Sass tools and resources]

{{样式表语言}}

[[Category:网页设计]]
[[Category:层叠样式表|*]]
[[Category:2006年建立的程式語言]]

Sass - 版本历史

imported>Yumeto：​使用DisamAssist清理消歧義連結：Go（改連結至Go語言）。

imported>Yumeto：使用DisamAssist清理消歧義連結：Go（改連結至Go語言）。