Sass参考手册详细分享

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配Compass 样式库一同使用时。

特色

完全兼容 CSS3在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)对颜色和其它值进行操作的{Sass::Script::Functions 函数}函数库控制指令之类的高级功能良好的格式，可对输出格式进行定制支持 Firebug

语法

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的filter语法。 这种语种语法的样式表文件需要以.scss扩展名。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。 缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异； 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以.sass作为扩展名。

任一语法都可以导入另一种语法撰写的文件中。 只要使用sass-convert命令行工具，就可以将一种语法转换为另一种语法：

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

使用 Sass

Sass 有三种使用方式： 命令行工具、独立的 Ruby 模块，以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。 所有这些方式的第一步都是安装 Sass gem：

gem install sass

如果你使用的是 Windows， 就需要先安装 Ruby。

如果要在命令行中运行 Sass ,只要输入

sass input.scss output.css

你还可以命令 Sass 监视文件的改动并更新 CSS ：

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：

sass --watch app/sass:public/stylesheets

使用sass --help可以列出完整的帮助文档。

在 Ruby 代码中使用 Sass 是非常容易的。 安装 Sass gem 之后，你可以执行require "sass"， 然后就可以像这样使用 {Sass::Engine} ：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

Rack/Rails/Merb 插件

如果需要在 Rails 3 之前的版本中启用 Sass，可以把这一行加到environment.rb中：

config.gem "sass"

对于 Rails 3，则是把这一行加到 Gemfile 中：

gem "sass"

要在 Merb 中启用 Sass，需要把这一行加到config/dependencies.rb中：

dependency "merb-haml"

在 Rack 应用中启用 Sass，需要在config.ru中添加：

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Sass 样式表跟视图（views）的运作方式不同。 它并没有任何动态内容， 所以只需要在 Sass 文件更新时生成 CSS 即可。 默认情况下，.sass和.scss文件是放在 public/stylesheets/sass 目录下的（这可以通过:template_location选项进行配置）。 然后，在需要的时候，它们会被编译成相应的 CSS 文件并被放到 public/stylesheets 目录下。 例如，public/stylesheets/sass/main.scss 文件将会被编译为 public/stylesheets/main.css 文件。

缓存

默认情况下，Sass 会对编译过的模板（template）和partials进行缓存。 这将明显加快大量 Sass 文件的重新编译速度， 并且在 Sass 模板被切割为多个文件并通过@import引入形成一个大文件时效果最好。

如果不使用框架，Sass 将会把缓存的模板放入.sass-cache目录。 在 Rails 和 Merb 中，将被放到tmp/sass-cache目录。 此目录可以通过:cache_location选项进行配置。 如果你不希望 Sass 启用缓存功能， 可以将:cache选项设置为false。

选项

Options can be set by setting the {Sass::Plugin::Configuration#options Sass::Plugin#options} hash inenvironment.rbin Rails orconfig.ruin Rack...

Sass::Plugin.options[:style] = :compact

...or by setting theMerb::Plugin.config[:sass]hash ininit.rbin Merb...

Merb::Plugin.config[:sass][:style] = :compact

...or by passing an options hash to {Sass::Engine#initialize}. All relevant options are also available via flags to thesassandscsscommand-line executables. Available options are:

{#style-option}:style: Sets the style of the CSS output. SeeOutput Style.

{#syntax-option}:syntax: The syntax of the input file,:sassfor the indented syntax and:scssfor the CSS-extension syntax. This is only useful when you're constructing {Sass::Engine} instances yourself; it's automatically set properly when using {Sass::Plugin}. Defaults to:sass.

{#property_syntax-option}:property_syntax: Forces indented-syntax documents to use one syntax for properties. If the correct syntax isn't used, an error is thrown.:newforces the use of a colon after the property name. 例如：color: #0f3orwidth: $main_width.:oldforces the use of a colon before the property name. 例如：:color #0f3or:width $main_width. By default, either syntax is valid. This has no effect on SCSS documents.

{#cache-option}:cache: Whether parsed Sass files should be cached, allowing greater speed. Defaults to true.

{#read_cache-option}:read_cache: If this is set and:cacheis not, only read the Sass cache if it exists, don't write to it if it doesn't.

{#cache_store-option}:cache_store: If this is set to an instance of a subclass of {Sass::CacheStores::Base}, that cache store will be used to store and retrieve cached compilation results. Defaults to a {Sass::CacheStores::Filesystem} that is initialized using the:cache_locationoption.

{#never_update-option}:never_update: Whether the CSS files should never be updated, even if the template file changes. Setting this to true may give small performance gains. It always defaults to false. Only has meaning within Rack, Ruby on Rails, or Merb.

{#always_update-option}:always_update: Whether the CSS files should be updated every time a controller is accessed, as opposed to only when the template has been modified. Defaults to false. Only has meaning within Rack, Ruby on Rails, or Merb.

{#always_check-option}:always_check: Whether a Sass template should be checked for updates every time a controller is accessed, as opposed to only when the server starts. If a Sass template has been updated, it will be recompiled and will overwrite the corresponding CSS file. Defaults to false in production mode, true otherwise. Only has meaning within Rack, Ruby on Rails, or Merb.

{#poll-option}:poll: When true, always use the polling backend for {Sass::Plugin::Compiler#watch} rather than the native filesystem backend.

{#full_exception-option}:full_exception: Whether an error in the Sass code should cause Sass to provide a detailed description within the generated CSS file. If set to true, the error will be displayed along with a line number and source snippet both as a comment in the CSS file and at the top of the page (in supported browsers). Otherwise, an exception will be raised in the Ruby code. Defaults to false in production mode, true otherwise. Only has meaning within Rack, Ruby on Rails, or Merb.

{#template_location-option}:template_location: A path to the root sass template directory for your application. If a hash,:css_locationis ignored and this option designates a mapping between input and output directories. May also be given a list of 2-element lists, instead of a hash. Defaults tocss_location + "/sass". Only has meaning within Rack, Ruby on Rails, or Merb. Note that if multiple template locations are specified, all of them are placed in the import path, allowing you to import between them.Note that due to the many possible formats it can take, this option should only be set directly, not accessed or modified. Use the {Sass::Plugin::Configuration#template_location_array Sass::Plugin#template_location_array}, {Sass::Plugin::Configuration#add_template_location Sass::Plugin#add_template_location}, and {Sass::Plugin::Configuration#remove_template_location Sass::Plugin#remove_template_location} methods instead.

{#css_location-option}:css_location: The path where CSS output should be written to. This option is ignored when:template_locationis a Hash. Defaults to"./public/stylesheets". Only has meaning within Rack, Ruby on Rails, or Merb.

{#cache_location-option}:cache_location: The path where the cachedsasscfiles should be written to. Defaults to"./tmp/sass-cache"in Rails and Merb, or"./.sass-cache"otherwise. If the:cache_storeoptionis set, this is ignored.

{#unix_newlines-option}:unix_newlines: If true, use Unix-style newlines when writing files. Only has meaning on Windows, and only when Sass is writing the files (in Rack, Rails, or Merb, when using {Sass::Plugin} directly, or when using the command-line executable).

{#filename-option}:filename: The filename of the file being rendered. This is used solely for reporting errors, and is automatically set when using Rack, Rails, or Merb.

{#line-option}:line: The number of the first line of the Sass template. Used for reporting line numbers for errors. This is useful to set if the Sass template is embedded in a Ruby file.

{#load_paths-option}:load_paths: An array of filesystem paths or importers which should be searched for Sass templates imported with the@importdirective. These may be strings,Pathnameobjects, or subclasses of {Sass::Importers::Base}. This defaults to the working directory and, in Rack, Rails, or Merb, whatever:template_locationis. The load path is also informed by {Sass.load_paths} and theSASS_PATHenvironment variable.

{#filesystem_importer-option}:filesystem_importer: A {Sass::Importers::Base} subclass used to handle plain string load paths. This should import files from the filesystem. It should be a Class object inheriting from {Sass::Importers::Base} with a constructor that takes a single string argument (the load path). Defaults to {Sass::Importers::Filesystem}.

{#line_numbers-option}:line_numbers: When set to true, causes the line number and file where a selector is defined to be emitted into the compiled CSS as a comment. Useful for debugging, especially when using imports and mixins. This option may also be called:line_comments. Automatically disabled when using the:compressedoutput style or the:debug_info/:trace_selectorsoptions.

{#trace_selectors-option}:trace_selectors: When set to true, emit a full trace of imports and mixins before each selector. This can be helpful for in-browser debugging of stylesheet imports and mixin includes. This option supersedes the:line_commentsoption and is superseded by the:debug_infooption. Automatically disabled when using the:compressedoutput style.

{#debug_info-option}:debug_info: When set to true, causes the line number and file where a selector is defined to be emitted into the compiled CSS in a format that can be understood by the browser. Useful in conjunction withthe FireSass Firebug extensionfor displaying the Sass filename and line number. Automatically disabled when using the:compressedoutput style.

{#custom-option}:custom: An option that's available for inpidual applications to set to make data available to {Sass::Script::Functions custom Sass functions}.

{#quiet-option}:quiet: When set to true, causes warnings to be disabled.

Syntax Selection

The Sass command-line tool will use the file extension to determine which syntax you are using, but there's not always a filename. Thesasscommand-line program defaults to the indented syntax but you can pass the--scssoption to it if the input should be interpreted as SCSS syntax. Alternatively, you can use thescsscommand-line program which is exactly like thesassprogram but it defaults to assuming the syntax is SCSS.

Encodings

When running on Ruby 1.9 and later, Sass is aware of the character encoding of documents. By default, Sass assumes that all stylesheets are encoded using whatever coding system your operating system defaults to. For many users this will beUTF-8, the de facto standard for the web. For some users, though, it may be a more local encoding.

If you want to use a different encoding for your stylesheet than your operating system default, you can use the@charsetdeclaration just like in CSS. Add@charset "encoding-name";at the beginning of the stylesheet (before any whitespace or comments) and Sass will interpret it as the given encoding. Note that whatever encoding you use, it must be convertible to Unicode.

Sass will also respect any Unicode BOMs and non-ASCII-compatible Unicode encodingsas specified by the CSS spec, although this isnotthe recommended way to specify the character set for a document. Note that Sass does not support the obscureUTF-32-2143,UTF-32-3412,EBCDIC,IBM1026, andGSM 03.38encodings, since Ruby does not have support for them and they're highly unlikely to ever be used in practice.

Output Encoding

In general, Sass will try to encode the output stylesheet using the same encoding as the input stylesheet. In order for it to do this, though, the input stylesheet must have a@charsetdeclaration; otherwise, Sass will default to encoding the output stylesheet asUTF-8. In addition, it will add a@charsetdeclaration to the output if it's not plain ASCII.

When other stylesheets with@charsetdeclarations are@imported, Sass will convert them to the same encoding as the main stylesheet.

Note that Ruby 1.8 does not have good support for character encodings, and so Sass behaves somewhat differently when running under it than under Ruby 1.9 and later. In Ruby 1.8, Sass simply uses the first@charsetdeclaration in the stylesheet or any of the other stylesheets it@imports.

CSS Extensions

Nested Rules

Sass allows CSS rules to be nested within one another. The inner rule then only applies within the outer rule's selector. 例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

被编译为：

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

This helps avoid repetition of parent selectors, and makes complex CSS layouts with lots of nested selectors much simpler. 例如：

#main {
  width: 97%;

  p, p {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

被编译为：

#main {
  width: 97%; }
  #main p, #main p {
    font-size: 2em; }
    #main p a, #main p a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

引用父选择符：&

Sometimes it's useful to use a nested rule's parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the&character. 例如：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

被编译为：

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

&在编译时将被替换为父选择符，输出到 CSS 中。 也就是说，如果你有一个深层嵌套的规则，父选择符也会在&被替换之前被完整的解析， 例如：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

被编译为：

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

嵌套属性

CSS has quite a few properties that are in "namespaces;" for instance,font-family,font-size, andfont-weightare all in thefontnamespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time. Sass provides a shortcut for this: just write the namespace once, then nest each of the sub-properties within it. 例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

被编译为：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

The property namespace itself can also have a value. 例如：

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

被编译为：

.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

Placeholder Selectors:%foo

Sass supports a special type of selector called a "placeholder selector". These look like class and id selectors, except the#or.is replaced by%. They're meant to be used with the@extenddirective; for more information see@extend-Only Selectors.

On their own, without any use of@extend, rulesets that use placeholder selectors will not be rendered to CSS.

Comments:/* */and//

Sass supports standard multiline CSS comments with/* */, as well as single-line comments with//. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed. 例如：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

被编译为：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

When the first letter of a comment is!, the comment will be interpolated and always rendered into css output even in compressed output modes. This is useful for adding Copyright notices to your generated CSS.

SassScript

In addition to the plain CSS property syntax, Sass supports a small set of extensions called SassScript. SassScript allows properties to use variables, arithmetic, and extra functions. SassScript can be used in any property value.

SassScript can also be used to generate selectors and property names, which is useful when writingmixins. This is done viainterpolation.

Interactive Shell

You can easily experiment with SassScript using the interactive shell. To launch the shell run the sass command-line with the-ioption. At the prompt, enter any legal SassScript expression to have it evaluated and the result printed out for you:

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

Variables:$

The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties:

$width: 5em;

You can then refer to them in properties:

#main {
  width: $width;
}

Variables are only available within the level of nested selectors where they're defined. If they're defined outside of any nested selectors, they're available everywhere.

Variables used to use the prefix character!; this still works, but it's deprecated and prints a warning.$is the recommended syntax.

Variables also used to be defined with=rather than:; this still works, but it's deprecated and prints a warning.:is the recommended syntax.

数据类型

SassScript 支持六种主要的数据类型：

数字（例如1.2、13、10px）文本字符串，无论是否有引号（例如"foo"、'bar'、baz）颜色（例如blue、#04a3f9、rgba(255, 0, 0, 0.5)）布尔值（例如true、false）空值（例如null）值列表，用空格或逗号分隔（例如1.5em 1em 0 2em、Helvetica, Arial, sans-serif）

SassScript 还支持所有其他 CSS 属性值类型， 例如 Unicode 范围和!important声明。 然而，它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。

字符串

CSS 提供了两种类型的字符串：带引号的字符串，例如"Lucida Grande"或'http://sass-lang.com'； 不带引号的字符串，例如sans-serif或bold。 SassScript 能够识别这两种字符串， 并且，如果一种类型的字符串 and in general if one kind of string is used in the Sass document, that kind of string will be used in the resulting CSS.

There is one exception to this, though: when using#{}interpolation, quoted strings are unquoted. This makes it easier to use e.g. selector names inmixins. 例如：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

被编译为：

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

It's also worth noting that when using thedeprecated=property syntax, all strings are interpreted as unquoted, regardless of whether or not they're written with quotes.

Lists

Lists are how Sass represents the values of CSS declarations likemargin: 10px 15px 0 0orfont-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, inpidual values count as lists, too: they're just lists with one item.

On their own, lists don't do much, but theSass list functionsmake them useful. The {Sass::Script::Functions#nth nth function} can access items in a list, the {Sass::Script::Functions#join join function} can join multiple lists together, and the {Sass::Script::Functions#append append function} can add items to lists. The@eachrulecan also add styles for each item in a list.

In addition to containing simple values, lists can contain other lists. For example,1px 2px, 5px 6pxis a two-item list containing the list1px 2pxand the list5px 6px. If the inner lists have the same separator as the outer list, you'll need to use parentheses to make it clear where the inner lists start and stop. For example,(1px 2px) (5px 6px)is also a two-item list containing the list1px 2pxand the list5px 6px. The difference is that the outer list is space-separated, where before it was comma-separated.

When lists are turned into plain CSS, Sass doesn't add any parentheses, since CSS doesn't understand them. That means that(1px 2px) (5px 6px)and1px 2px 5px 6pxwill look the same when they become CSS. However, they aren't the same when they're Sass: the first is a list containing two lists, while the second is a list containing four numbers.

Lists can also have no items in them at all. These lists are represented as(). They can't be output directly to CSS; if you try to do e.g.font-family: (), Sass will raise an error. If a list contains empty lists or null values, as in1px 2px () 3pxor1px 2px null 3px, the empty lists and null values will be removed before the containing list is turned into CSS.

运算

所有数据类型都支持等式运算 (==and!=)。 另外，每种数据类型也有其支持的特殊运算符。

数字运算

SassScript 支持数字的标准运算（加+、减-、乘*、除/和取模%），并且，如果需要的话，也可以在不同单位间做转换：

p {
  width: 1in + 8pt;
}

被编译为：

p {
  width: 1.111in; }

数字也支持关系运算（<、>、<=、>=）， 等式运算（==、!=）被所有数据类型支持。

除法运算和/

CSS 允许/出现在属性值里，作为分隔数字的一种方法。 既然 SassScript 是 CSS 属性语法的扩展， 他就必须支持这种语法，同时也允许/用在除法运算上。 也就是说，默认情况下，在 SassScript 里用/分隔的两个数字， 都会在 CSS 中原封不动的输出。

然而，在以下三种情况中，/会被解释为除法运算。 这就覆盖了绝大多数真正使用除法运算的情况。 这些情况是：

如果数值或它的任意部分是存储在一个变量中或是函数的返回值。如果数值被圆括号包围。如果数值是另一个数学表达式的一部分。

例如：

p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

被编译为：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果你希望在纯 CSS 中使用变量和/， 你可以用#{}包住变量。 例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

被编译为：

p {
  font: 12px/30px; }

颜色运算

所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算。 例如：

p {
  color: #010203 + #040506;
}

计算公式为01 + 04 = 05、02 + 05 = 07和03 + 06 = 09， 并且被合成为：

p {
  color: #050709; }

一般 {Sass::Script::Functions color functions} 比颜色运算更有用，并且能达到相同的效果。

算数运算也能将数字和颜色值一起运算，同样也是分段运算的。 例如：

p {
  color: #010203 * 2;
}

计算公式为01 * 2 = 02、02 * 2 = 04和03 * 2 = 06， 并且被合成为：

p {
  color: #020406; }

注意那些有 alpha 通道的颜色（像那些通过 {Sass::Script::Functions#rgba rgba} 或 {Sass::Script::Functions#hsla hsla} 函数创建的）必须要有同样的 alpha 值，才能执行颜色运算。 T颜色运算不会影响 alpha 值。 例如：

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

被编译为：

p {
  color: rgba(255, 255, 0, 0.75); }

一个颜色的alpha 通道可以通过 {Sass::Script::Functions#opacify opacify} 和 {Sass::Script::Functions#transparentize transparentize} 函数进行调整。 例如：

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

被编译为：

p {
  color: rgba(255, 0, 0, 0.9);
  background-color: rgba(255, 0, 0, 0.25); }

IE 滤镜需要每个颜色都包含 alpha 层， 并且得用 #AABBCCDD 这样严格的格式。你可以轻松的利用 {Sass::Script::Functions#ie_hex_str ie_hex_str} 函数对其做转换。 例如：

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
p {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

被编译为：

p {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

字符串运算

+运算符可以用来连接字符串：

p {
  cursor: e + -resize;
}

被编译为：

p {
  cursor: e-resize; }

注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在+符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在+符号左侧）， 结果将是一个没有引号的字符串。 例如：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

被编译为：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

默认情况下，如果两个值彼此相邻，它们会被用空格连接起来：

p {
  margin: 3px + 4px auto;
}

被编译为：

p {
  margin: 7px auto; }

在文本字符串中，#{} 形式的表达式可以被用来在字符串中添加动态值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

被编译为：

p:before {
  content: "I ate 15 pies!"; }

空值会被视作空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

被编译为：

p:before {
  content: "I ate  pies!"; }

布尔运算

SassScript 支持布尔值做and、or和not运算。

List Operations

Lists don't support any special operations. Instead, they're manipulated using thelist functions.

圆括号

圆括号可以用来改变运算顺序：

p {
  width: (1em + 2em) * 3;
}

被编译为：

p {
  width: 9em; }

函数

SassScript 定义了一些有用的函数， 这些函数可以像普通 CSS 函数语法一样被调用：

p {
  color: hsl(0, 100%, 50%);
}

被编译为：

p {
  color: #ff0000; }

关键词参数

Sass 函数允许指定明确的关键词参数 (keyword arguments) 进行调用。 上面的例子也可以写成：

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

虽然不够简明，但可以让样式表阅读起来会更方便。 关键词参数让函数具有更灵活的接口， 即便参数众多，也不会让使用变得困难。

命名参数（named arguments）可以以任意顺序传入，并且，具有默认值的参数可以省略掉。 由于命名参数也是变量名称，因此，下划线、短横线可以交换使用。

完整的 Sass 函数列表和它们的参数名称，以及在 Ruby 里如何定义你自己的函数的步骤，请见 {Sass::Script::Functions}。

Interpolation:#{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

被编译为：

p.foo {
  border-color: blue; }

It's also possible to use#{}to put SassScript into property values. In most cases this isn't any better than using a variable, but using#{}does mean that any operations near it will be treated as plain CSS. 例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

被编译为：

p {
  font: 12px/30px; }

变量默认值：!default

你可以在变量尚未赋值前，通过在值的末尾处添加!default标记来为其指定。 也就是说，如果该变量已经被赋值， 就不会再次赋值， 但是，如果还没有被赋值，就会被指定一个值。

例如：

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

被编译为：

#main {
  content: "First content";
  new-content: "First time reference"; }

变量的值如果是null的话，会被 !default 当做没有值：

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

被编译为：

#main {
  content: "Non-null content"; }

@规则和指令

Sass 支持所有 CSS3 的@规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。 这些规则在 Sass 中具有不同的功效，详细解释如下。 也可参考控制指令（control directives）和mixin 指令（mixin directives）。

@import

Sass 扩展了 CSS 的@import规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或mixins都可以在主文件中使用。

Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过:load_paths选项 或者在命令行中使用--load-path选项来指定额外的搜索目录。

@import根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的@import规则：

如果文件的扩展名是.css。I如果文件名以http://开头。如果文件名是url()。如果@import包含了任何媒体查询（media queries）。

如果上述情况都没有出现，并且扩展名是.scss或.sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有.scss或.sass扩展名的同名文件并将其引入。

例如：

@import "foo.scss";

或

@import "foo";

两者都将引入foo.scss文件， 而

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

将被编译为：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以通过一个@import引入多个文件。例如：

@import "rounded-corners", "text-shadow";

将引入rounded-corners和text-shadow两个文件。

Imports may contain#{}interpolation, but only with certain restrictions. It's not possible to dynamically import a Sass file based on a variable; interpolation is only for CSS imports. As such, it only works withurl()imports. 例如：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

would compile to

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

片段

如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。

例如，你有一个文件叫做_colors.scss。 这样就不会生成_colors.css文件了， 而且你还可以这样做

@import "colors";

来引入_colors.scss文件。

注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如，_colors.scss不能与colors.scss并存。

嵌套@import

虽然大部分时间只需在顶层文件使用@import就行了， 但是，你还可以把他们包含在 CSS 规则 和@media规则中。

Like a base-level@import, this includes the contents of the@imported file. However, the imported rules will be nested in the same place as the original@import.

For example, ifexample.scsscontains

.example {
  color: red;
}

then

#main {
  @import "example";
}

would compile to

#main .example {
  color: red;
}

Directives that are only allowed at the base level of a document, like@mixinor@charset, are not allowed in files that are@imported in a nested context.

It's not possible to nest@importwithin mixins or control directives.

@media

@mediadirectives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. If a@mediadirective appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet. 例如：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

被编译为：

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@mediaqueries can also be nested within one another. The queries will then be combined using theandoperator. 例如：

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

被编译为：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

Finally,@mediaqueries can contain SassScript expressions (including variables, functions, and operators) in place of the feature names and feature values. 例如：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

被编译为：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so:

Oh no! You've been hacked!

And our styles like so:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

Unfortunately, this means that we have to always remember to use.errorwith.seriousError. This is a maintenance burden, leads to tricky bugs, and can bring non-semantic style concerns into the markup.

The@extenddirective avoids these problems by telling Sass that one selector should inherit the styles of another selector. 例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

被编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

This means that all styles defined for.errorare also applied to.seriousError, in addition to the styles specific to.seriousError. In effect, every element with class.seriousErroralso has class.error.

Other rules that use.errorwill work for.seriousErroras well. For example, if we have special styles for errors caused by hackers:

.error.intrusion {
  background-image: url("/image/hacked.png");
}

Then

will have thehacked.pngbackground image as well.

 

How it Works

@extendworks by inserting the extending selector (e.g..seriousError) anywhere in the stylesheet that the extended selector (.e.g.error) appears. Thus the example above:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

被编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

When merging selectors,@extendis smart enough to avoid unnecessary duplication, so something like.seriousError.seriousErrorgets translated to.seriousError. In addition, it won't produce selectors that can't match anything, like#main#footer.

Extending Complex Selectors

Class selectors aren't the only things that can be extended. It's possible to extend any selector involving only a single element, such as.special.cool,a:hover, ora.user[href^="http://"]. 例如：

.hoverlink {
  @extend a:hover;
}

Just like with classes, this means that all styles defined fora:hoverare also applied to.hoverlink. 例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

被编译为：

a:hover, .hoverlink {
  text-decoration: underline; }

Just like with.error.intrusionabove, any rule that usesa:hoverwill also work for.hoverlink, even if they have other selectors as well. 例如：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

被编译为：

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

Multiple Extends

A single selector can extend more than one selector. This means that it inherits the styles of all the extended selectors. 例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

被编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

In effect, every element with class.seriousErroralso has class.errorandclass.attention. Thus, the styles defined later in the document take precedence:.seriousErrorhas background color#ff0rather than#fdd, since.attentionis defined later than.error.

Multiple extends can also be written using a comma-separated list of selectors. For example,@extend .error, .attentionis the same as@extend .error; @extend.attention.

Chaining Extends

It's possible for one selector to extend another selector that in turn extends a third. 例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

Now everything with class.seriousErroralso has class.error, and everything with class.criticalErrorhas class.seriousErrorandclass.error. It's compiled to:

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

Selector Sequences

Selector sequences, such as.foo .baror.foo + .bar, currently can't be extended. However, it is possible for nested selectors themselves to use@extend. 例如：

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

is compiled to

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

Merging Selector Sequences

Sometimes a selector sequence extends another selector that appears in another sequence. In this case, the two sequences need to be merged. 例如：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

While it would technically be possible to generate all selectors that could possibly match either sequence, this would make the stylesheet far too large. The simple example above, for instance, would require ten selectors. Instead, Sass generates only selectors that are likely to be useful.

When the two sequences being merged have no selectors in common, then two new selectors are generated: one with the first sequence before the second, and one with the second sequence before the first. 例如：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

被编译为：

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

If the two sequences do share some selectors, then those selectors will be merged together and only the differences (if any still exist) will alternate. In this example, both sequences contain the id#admin, so the resulting selectors will merge those two ids:

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

这被编译为：

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

@extend-Only Selectors

Sometimes you'll write styles for a class that you only ever want to@extend, and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to@extendif they need and ignore if they don't.

If you use normal classes for this, you end up creating a lot of extra CSS when the stylesheets are generated, and run the risk of colliding with other classes that are being used in the HTML. That's why Sass supports "placeholder selectors" (for example,%foo).

Placeholder selectors look like class and id selectors, except the#or.is replaced by%. They can be used anywhere a class or id could, and on their own they prevent rulesets from being rendered to CSS. 例如：

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

However, placeholder selectors can be extended, just like classes and ids. The extended selectors will be generated, but the base placeholder selector will not. 例如：

.notice {
  @extend %extreme;
}

被编译为：

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

The!optionalFlag

Normally when you extend a selector, it's an error if that@extenddoesn't work. For example, if you writea.important {@extend .notice}, it's an error if there are no selectors that contain.notice. It's also an error if the only selector containing.noticeish1.notice, sinceh1conflicts withaand so no new selector would be generated.

Sometimes, though, you want to allow an@extendnot to produce any new selectors. To do so, just add the!optionalflag after the selector. For example:

a.important {
  @extend .notice !optional;
}

@extendin Directives

There are some restrictions on the use of@extendwithin directives such as@media. Sass is unable to make CSS rules outside of the@mediablock apply to selectors inside it without creating a huge amount of stylesheet bloat by copying styles all over the place. This means that if you use@extendwithin@media(or other CSS directives), you may only extend selectors that appear within the same directive block.

For example, the following works fine:

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

But this is an error:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

Someday we hope to have@extendsupported natively in the browser, which will allow it to be used within@mediaand other directives.

@debug

The@debugdirective prints the value of a SassScript expression to the standard error output stream. It's useful for debugging Sass files that have complicated SassScript going on. 例如：

@debug 10em + 12em;

outputs:

Line 1 DEBUG: 22em

@warn

The@warndirective prints the value of a SassScript expression to the standard error output stream. It's useful for libraries that need to warn users of deprecations or recovering from minor mixin usage mistakes. There are two major distinctions between@warnand@debug:

You can turn warnings off with the--quietcommand-line option or the:quietSass option.A stylesheet trace will be printed out along with the message so that the user being warned can see where their styles caused the warning.

Usage Example:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

Control Directives

SassScript supports basic control directives for including styles only under some conditions or including the same style several times with variations.

Note that control directives are an advanced feature, and are not recommended in the course of day-to-day styling. They exist mainly for use inmixins, particularly those that are part of libraries likeCompass, and so require substantial flexibility.

@if

The@ifdirective takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other thanfalseornull:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

被编译为：

p {
  border: 1px solid; }

The@ifstatement can be followed by several@else ifstatements and one@elsestatement. If the@ifstatement fails, the@else ifstatements are tried in order until one succeeds or the@elseis reached. 例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

被编译为：

p {
  color: green; }

@for

The@fordirective repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms:@for $var from through and@for $var from to . Note the difference in the keywordsthroughandto.$varcan be any variable name, like$i;andare SassScript expressions that should return integers.

The@forstatement sets$varto each successive number in the specified range and each time outputs the nested styles using that value of$var. For the formfrom ... through, the rangeincludesthe values ofand, but the formfrom ... toruns up tobut not includingthe value of. Using thethroughsyntax,

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

被编译为：

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

The@eachrule has the form@each $var in .$varcan be any variable name, like$lengthor$name, andis a SassScript expression that returns a list.

The@eachrule sets$varto each item in the list, then outputs the styles it contains using that value of$var. 例如：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

被编译为：

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

@while

The@whiledirective takes a SassScript expression and repeatedly outputs the nested styles until the statement evaluates tofalse. This can be used to achieve more complex looping than the@forstatement is capable of, although this is rarely necessary. 例如：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

被编译为：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

Mixin Directives

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like.float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even takeargumentswhich allows you to produce a wide variety of styles with very few mixins.

Defining a Mixin:@mixin

Mixins are defined with the@mixindirective. It's followed by the name of the mixin and optionally thearguments, and a block containing the contents of the mixin. For example, thelarge-textmixin is defined as follows:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Mixins may also contain selectors, possibly mixed with properties. The selectors can even containparent references. 例如：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

Including a Mixin:@include

Mixins are included in the document with the@includedirective. This takes the name of a mixin and optionallyarguments to pass to it, and includes the styles defined by that mixin into the current rule. 例如：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

被编译为：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

Mixins may also be included outside of any rule (that is, at the root of the document) as long as they don't directly define any properties or use any parent references. 例如：

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

被编译为：

a {
  color: blue;
  background-color: red; }

Mixin definitions can also include other mixins. 例如：

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

A mixin may not include itself, directly or indirectly. That is, mixin recursion is forbidden.

Mixins that only define descendent selectors can be safely mixed into the top most level of a document.

Arguments

Mixins can take arguments SassScript values as arguments, which are given when the mixin is included and made available within the mixin as variables.

When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name. Then when including the mixin, values can be passed in in the same manner. 例如：

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

被编译为：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

Mixins can also specify default values for their arguments using the normal variable-setting syntax. Then when the mixin is included, if it doesn't pass in that argument, the default value will be used instead. 例如：

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

被编译为：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

Keyword Arguments

Mixins can also be included using explicit keyword arguments. For instance, we the above example could be written as:

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

While this is less concise, it can make the stylesheet easier to read. It also allows functions to present more flexible interfaces, providing many arguments without becoming difficult to call.

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

Variable Arguments

Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports "variable arguments," which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as alist. These arguments look just like normal arguments, but are followed by.... 例如：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

被编译为：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Variable arguments can also be used when calling a mixin. Using the same syntax, you can expand a list of values so that each value is passed as a separate argument. 例如：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

被编译为：

.primary {