Sass (Syntactically Awesome StyleSheets)

Posted 2020-07-28 山冈龙的中文化PHP和JavaScript之家

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Sass (Syntactically Awesome StyleSheets)相关的知识，希望对你有一定的参考价值。

Sass (Syntactically Awesome StyleSheets)

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 in environment.rb in Rails or config.ru in Rack...

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

...or by setting the Merb::Plugin.config[:sass] hash in init.rb in 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 the sass and scss command-line executables. Available options are:

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

{#syntax-option} :syntax : The syntax of the input file, :sass for the indented syntax and :scss for 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. :new forces the use of a colon after the property name. 例如： color: #0f3 or width: $main_width. :old forces the use of a colon before the property name. 例如： :color #0f3 or :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 :cache is 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_location option.

{#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_location is 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 to css_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_location is 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 cached sassc files should be written to. Defaults to "./tmp/sass-cache" in Rails and Merb, or "./.sass-cache" otherwise. If the :cache_store option is 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 @import directive. These may be strings, Pathname objects, or subclasses of {Sass::Importers::Base}. This defaults to the working directory and, in Rack, Rails, or Merb, whatever :template_location is. The load path is also informed by {Sass.load_paths} and the SASS_PATH environment 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 :compressed output style or the :debug_info/:trace_selectors options.

{#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_comments option and is superseded by the :debug_info option. Automatically disabled when using the :compressed output 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 with the FireSass Firebug extension for displaying the Sass filename and line number. Automatically disabled when using the :compressed output style.

{#custom-option} :custom : An option that‘s available for individual 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. The sass command-line program defaults to the indented syntax but you can pass the --scss option to it if the input should be interpreted as SCSS syntax. Alternatively, you can use the scss command-line program which is exactly like the sass program 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 be UTF-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 @charset declaration 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 encodings as specified by the CSS spec, although this is not the recommended way to specify the character set for a document. Note that Sass does not support the obscure UTF-32-2143, UTF-32-3412, EBCDIC, IBM1026, and GSM 03.38 encodings, 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 @charset declaration; otherwise, Sass will default to encoding the output stylesheet as UTF-8. In addition, it will add a @charset declaration to the output if it‘s not plain ASCII.

When other stylesheets with @charset declarations 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 @charset declaration 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, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

被编译为：

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div 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, and font-weight are all in the font namespace. 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 @extend directive; 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 writing mixins. This is done via interpolation.

Interactive Shell

You can easily experiment with SassScript using the interactive shell. To launch the shell run the sass command-line with the -i option. 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 in mixins. 例如：

@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 the deprecated = 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 like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they‘re just lists with one item.

On their own, lists don‘t do much, but the Sass list functions make 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 @each rule can 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 6px is a two-item list containing the list 1px 2px and the list 5px 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 list 1px 2px and the list 5px 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) and 1px 2px 5px 6px will 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 in 1px 2px () 3px or 1px 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;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘false‘, 
startColorstr=‘#{ie-hex-str($green)}‘, 
endColorstr=‘#{ie-hex-str($translucent-red)}‘);
}

被编译为：

div {
  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 the list 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 with url() 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, if example.scss contains

.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 @mixin or @charset, are not allowed in files that are @imported in a nested context.

It‘s not possible to nest @import within mixins or control directives.

`@media`

@media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive 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; } }

@media queries can also be nested within one another. The queries will then be combined using the and operator. 例如：

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

被编译为：

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

Finally, @media queries 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:

<div class="error seriousError">
  Oh no! You‘ve been hacked!
</div>

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 .error with .seriousError. This is a maintenance burden, leads to tricky bugs, and can bring non-semantic style concerns into the markup.

The @extend directive 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 .error are also applied to .seriousError, in addition to the styles specific to .seriousError. In effect, every element with class .seriousError also has class .error.

Other rules that use .error will work for .seriousError as well. For example, if we have special styles for errors caused by hackers:

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

Then <div class="seriousError intrusion"> will have the hacked.png background image as well.

How it Works

@extend works 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, @extend is smart enough to avoid unnecessary duplication, so something like .seriousError.seriousError gets 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, or a.user[href^="http://"]. 例如：

.hoverlink {
  @extend a:hover;
}

Just like with classes, this means that all styles defined for a:hover are also applied to .hoverlink. 例如：

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

被编译为：

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

Just like with .error.intrusion above, any rule that uses a:hover will 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 .seriousError also has class .error and class .attention. Thus, the styles defined later in the document take precedence: .seriousError has background color #ff0 rather than #fdd, since .attention is defined later than .error.

Multiple extends can also be written using a comma-separated list of selectors. For example, @extend .error, .attention is 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 .seriousError also has class .error, and everything with class .criticalError has class .seriousError and class .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 .bar or .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 @extend if 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 `!optional` Flag

Normally when you extend a selector, it‘s an error if that @extend doesn‘t work. For example, if you write a.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 .notice is h1.notice, since h1 conflicts with a and so no new selector would be generated.

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

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

`@extend` in Directives

There are some restrictions on the use of @extend within directives such as @media. Sass is unable to make CSS rules outside of the @media block 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 @extend within @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 @extend supported natively in the browser, which will allow it to be used within @media and other directives.

`@debug`

The @debug directive 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 @warn directive 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 @warn and @debug:

You can turn warnings off with the --quiet command-line option or the :quiet Sass 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 in mixins, particularly those that are part of libraries like Compass, and so require substantial flexibility.

`@if`

The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null:

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

被编译为：

p {
  border: 1px solid; }

The @if statement can be followed by several @else if statements and one @else statement. If the @if statement fails, the @else if statements are tried in order until one succeeds or the @else is 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 @for directive 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 <start> through <end> and @for $var from <start> to <end>. Note the difference in the keywords through and to. $var can be any variable name, like $i; <start> and <end> are SassScript expressions that should return integers.

The @for statement sets $var to each successive number in the specified range and each time outputs the nested styles using that value of $var. For the form from ... through, the range includes the values of <start> and <end>, but the form from ... to runs up to but not including the value of <end>. Using the through syntax,

@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 @each rule has the form @each $var in <list>. $var can be any variable name, like $length or $name, and <list> is a SassScript expression that returns a list.

The @each rule sets $var to 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 @while directive takes a SassScript expression and repeatedly outputs the nested styles until the statement evaluates to false. This can be used to achieve more complex looping than the @for statement 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 take arguments which allows you to produce a wide variety of styles with very few mixins.

Defining a Mixin: `@mixin`

Mixins are defined with the @mixin directive. It‘s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin. For example, the large-text mixin is defined as follows:

@mixin large-text {
  font: {
以上是关于Sass (Syntactically Awesome StyleSheets)的主要内容，如果未能解决你的问题，请参考以下文章 
 Sass (Syntactically Awesome StyleSheets)
 The request sent by the client was syntactically incorrect.(转载)
 错误400-The request sent by the client was syntactically incorrect
 论文阅读 | Adversarial Example Generation with Syntactically Controlled Paraphrase Networks
 description The request sent by the client was syntactically incorrect.
 解决SpringMVC入参出现The request sent by the client was syntactically incorrect请求语法错误方法

Sass (Syntactically Awesome StyleSheets)

Sass (Syntactically Awesome StyleSheets)

特色

语法

使用 Sass

Rack/Rails/Merb 插件

缓存

选项

Syntax Selection

Encodings

Output Encoding

CSS Extensions

Nested Rules

引用父选择符： &

嵌套属性

Placeholder Selectors: %foo

Comments: /* */ and //

SassScript

Interactive Shell

Variables: $

数据类型

字符串

Lists

运算

数字运算

除法运算和 /

颜色运算

字符串运算

布尔运算

List Operations

圆括号

函数

关键词参数

Interpolation: #{}

变量默认值： !default

@ 规则和指令

@import

片段

嵌套 @import

@media

@extend

How it Works

Extending Complex Selectors

Multiple Extends

Chaining Extends

Selector Sequences

Merging Selector Sequences

@extend-Only Selectors

The !optional Flag

@extend in Directives

@debug

@warn

Control Directives

@if

@for

@each

@while

Mixin Directives

Defining a Mixin: @mixin

引用父选择符： `&`

Placeholder Selectors: `%foo`

Comments: `/* */` and `//`

Variables: `$`

除法运算和 `/`

Interpolation: `#{}`

变量默认值： `!default`

`@` 规则和指令

`@import`

嵌套 `@import`

`@media`

`@extend`

`@extend`-Only Selectors

The `!optional` Flag

`@extend` in Directives

`@debug`

`@warn`

`@if`

`@for`

`@each`

`@while`

Defining a Mixin: `@mixin`