Sass

维基百科，自由的百科全书
（重定向自SCSS）
跳转到导航 跳转到搜索
Sass
设计者Hampton Catlin
实现者Natalie Weizenbaum, Chris Eppstein
发行时间2007
当前版本
    Module:EditAtWikidata第29行Lua错误：attempt to index field 'wikibase' (a nil value)
    类型系统动态类型
    操作系统跨平台
    许可证MIT许可证
    文件扩展名.sass, .scss
    网站sass-lang.com
    主要实现产品
    Ruby
    受影响于
    CSS, YAML, Haml, LESS
    影响语言
    LESS, Stylus, Tritium

    Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。[2][3]在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

    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]

    SassScript提供以下功能：变量、嵌套、混入（Mixin）、选择器继承。[4]

    变量[编辑]

    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;
}

    Sass支持多重继承.[9]

    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的设计目标是：

    • 性能：开发者反映，C++的实现速度是Ruby实现的10倍。[13]
    • 更容易集成：因为是一个C++库，不必集成或实现Ruby解释器，因此在自行开发软件的时候事情会变得更容易。例如，libSass现在已经被应用到Node.js、Go和Ruby等环境。[11]
    • 兼容性：libSass的目标是与Ruby实现完全兼容。但是目标尚未完全实现。[7]

    IDE集成[编辑]

    IDE 软件 网站
    Adobe Dreamweaver CC 2017 https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/（页面存档备份，存于互联网档案馆）
    Eclipse
    Emacs SCSS Mode https://github.com/antonj/scss-mode/（页面存档备份，存于互联网档案馆）
    JetBrains IntelliJ IDEA (Ultimate Edition) https://www.jetbrains.com/idea/（页面存档备份，存于互联网档案馆）
    JetBrains PhpStorm http://www.jetbrains.com/phpstorm/（页面存档备份，存于互联网档案馆）
    JetBrains RubyMine http://www.jetbrains.com/ruby/（页面存档备份，存于互联网档案馆）
    Microsoft Visual Studio Mindscape http://www.mindscapehq.com/products/web-workbench（页面存档备份，存于互联网档案馆）
    Microsoft Visual Studio SassyStudio http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d（页面存档备份，存于互联网档案馆）
    Microsoft WebMatrix http://www.microsoft.com/web/（页面存档备份，存于互联网档案馆）
    NetBeans http://plugins.netbeans.org/plugin/34929/scss-support（页面存档备份，存于互联网档案馆）
    Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433（页面存档备份，存于互联网档案馆）
    Atom https://github.com/atom/language-sass（页面存档备份，存于互联网档案馆）
    Visual Studio Code https://code.visualstudio.com/Docs/languages/css（页面存档备份，存于互联网档案馆）
    Sublime https://github.com/P233/Syntax-highlighting-for-Sass（页面存档备份，存于互联网档案馆）
    Edit+ https://www.editplus.com/others.html（页面存档备份，存于互联网档案馆）

    参见[编辑]

    参考[编辑]

    1. ^ Latest releases. [2020-02-26]. （原始内容存档于2020-07-15）. 
    2. ^ 存档副本. [2013-08-30]. （原始内容存档于2013-09-01）. 
    3. ^ Natalie Weizenbaum's blog. [2015-08-12]. （原始内容存档于2013-01-16）. 
    4. ^ 4.0 4.1 4.2 4.3 4.4 4.5 4.6 Media Mark（3.2.12）. Sass - Syntactically Awesome Stylesheets. Sass-lang.com. [2014-02-23]. （原始内容存档于2020-02-18）. 
    5. ^ Sass - Syntactically Awesome Stylesheets （页面存档备份，存于互联网档案馆） Tutorial
    6. ^ Sass / Scss. Drupal.org. [2014-02-23]. （原始内容存档于2016-03-10）. 
    7. ^ 7.0 7.1 7.2 H. Catlin. Hampton's 6 Rules of Mobile Design. HTML5 Developer Conference. 2012-10-15 [2013-07-11]. （原始内容存档于2014-06-24）. 
    8. ^ jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting. Code.google.com. [2014-02-23]. （原始内容存档于2014-02-12）. 
    9. ^ 9.0 9.1 9.2 9.3 9.4 Sass (Syntactically Awesome StyleSheets) （页面存档备份，存于互联网档案馆） SASS_REFERENCE
    10. ^ Module: Sass::Script::Functions （页面存档备份，存于互联网档案馆） Sass Functions
    11. ^ 11.0 11.1 M. Catlin. libsass. Moovweb Blog. 2012-04-30 [2013-07-11]. （原始内容存档于2013-05-08）. 
    12. ^ C. Eppstein. Tweet. 2012-04-15 [2013-07-11]. （原始内容存档于2016-03-04）. 
    13. ^ D. Le Nouaille. Sassc and Bourbon. 2013-06-07 [2013-07-11]. （原始内容存档于2013-06-18）. 

    外部链接[编辑]

    检索自“https://arolstar52-zhtest.hf.space/index.php?title=Sass&oldid=2602539”