Sass 是對 CSS 的擴展,讓 CSS 語言更強大、優雅。 它容許你使用變量、嵌套規則、 mixins、導入等衆多功能, 而且徹底兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好, 同時也讓你可以快速開始小型項目, 特別是在搭配 Compass 樣式庫一同使用時。css
Sass 有兩種語法。 第一種被稱爲 SCSS (Sassy CSS),是一個 CSS3 語法的擴充版本,這份參考資料使用的就是此語法。 也就是說,全部符合 CSS3 語法的樣式表也都是具備相同語法意義的 SCSS 文件。 另外,SCSS 理解大多數 CSS hacks 以及瀏覽器專屬語法,例如IE 古老的 filter
語法。 這種語種語法的樣式表文件須要以 .scss
擴展名。html
第二種比較老的語法成爲縮排語法(或者就稱爲 "Sass"), 提供了一種更簡潔的 CSS 書寫方式。 它不使用花括號,而是經過縮排的方式來表達選擇符的嵌套層級,I 並且也不使用分號,而是用換行符來分隔屬性。 不少人認爲這種格式比 SCSS 更容易閱讀,書寫也更快速。 縮排語法具備 Sass 的全部特點功能, 雖然有些語法上稍有差別; 這些差別在{file:INDENTED_SYNTAX.md 所排語法參考手冊}中都有描述。 使用此種語法的樣式表文件須要以 .sass
做爲擴展名。web
任一語法均可以導入另外一種語法撰寫的文件中。 只要使用 sass-convert
命令行工具,就能夠將一種語法轉換爲另外一種語法:shell
# 將 Sass 轉換爲 SCSS $ sass-convert style.sass style.scss # 將 SCSS 轉換爲 Sass $ sass-convert style.scss style.sass
Sass 有三種使用方式: 命令行工具、獨立的 Ruby 模塊,以及包含 Ruby on Rails 和 Merb 做爲支持 Rack 的框架的插件。 全部這些方式的第一步都是安裝 Sass gem:express
gem install sass
若是你使用的是 Windows, 就須要先安裝 Ruby。api
若是要在命令行中運行 Sass ,只要輸入瀏覽器
sass input.scss output.css
你還能夠命令 Sass 監視文件的改動並更新 CSS :緩存
sass --watch input.scss:output.css
若是你的目錄裏有不少 Sass 文件,你還能夠命令 Sass 監視整個目錄:sass
sass --watch app/sass:public/stylesheets
使用 sass --help
能夠列出完整的幫助文檔。ruby
在 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"
若是須要在 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.
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.
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.
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 @import
ed, 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 @import
s.
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; }
%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.
/* */
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.
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.
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
$
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 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
運算。
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}。
#{}
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
。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 @import
ed 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 @import
ed 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.
@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
.
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; }
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
.
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, 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; }
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 SelectorsSometimes 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; }
!optional
FlagNormally 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 DirectivesThere 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
:
--quiet
command-line option or the :quiet
Sass option.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; }
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; }
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.
@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: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }
Mixins may also contain selectors, possibly mixed with properties. The selectors can even contain parent references. 例如:
@mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } }
@include
Mixins are included in the document with the @include
directive. This takes the name of a mixin and optionally arguments 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.
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; }
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.
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 a list. 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 { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }
You can use variable arguments to wrap a mixin and add additional styles without changing the argument signature of the mixin. If you do so, even keyword arguments will get passed through to the wrapped mixin. 例如:
@mixin wrapped-stylish-mixin($args...) { font-weight: bold; @include stylish-mixin($args...); } .stylish { // The $width argument will get passed on to "stylish-mixin" as a keyword @include wrapped-stylish-mixin(#00ff00, $width: 100px); }
It is possible to pass a block of styles to the mixin for placement within the styles included by the mixin. The styles will appear at the location of any @content
directives found within the mixin. This makes is possible to define abstractions relating to the construction of selectors and directives.
例如:
@mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } }
Generates:
* html #logo { background-image: url(/logo.gif); }
The same mixins can be done in the .sass
shorthand syntax:
=apply-to-ie6-only * html @content +apply-to-ie6-only #logo background-image: url(/logo.gif)
Note: when the @content
directive is specified more than once or in a loop, the style block will be duplicated with each invocation.
The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin. This means that variables local to the mixin cannot be used within the passed style block and variables will resolve to the global value:
$color: white; @mixin colors($color: blue) { background-color: $color; @content; border-color: $color; } .colors { @include colors { color: $color; } }
Compiles to:
.colors { background-color: blue; color: white; border-color: blue; }
Additionally, this makes it clear that the variables and mixins that are used within the passed block are related to the other styles around where the block is defined. 例如:
#sidebar { $sidebar-width: 300px; width: $sidebar-width; @include smartphone { width: $sidebar-width / 3; } }
It is possible to define your own functions in sass and use them in any value or script context. 例如:
$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); }
Becomes:
#sidebar { width: 240px; }
As you can see functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within it, and you must call @return
to set the return value of the function.
As with mixins, you can call Sass-defined functions using keyword arguments. In the above example we could have called the function like this:
#sidebar { width: grid-width($n: 5); }
It is recommended that you prefix your functions to avoid naming conflicts and so that readers of your stylesheets know they are not part of Sass or CSS. For example, if you work for ACME Corp, you might have named the function above -acme-grid-width
.
User-defined functions also support variable arguments in the same way as mixins.
Although the default CSS style that Sass outputs is very nice and reflects the structure of the document, tastes and needs vary and so Sass supports several other styles.
Sass allows you to choose between four different output styles by setting the :style
option or using the --style
command-line flag.
:nested
Nested style is the default Sass style, because it reflects the structure of the CSS styles and the HTML document they're styling. Each property has its own line, but the indentation isn't constant. Each rule is indented based on how deeply it's nested. 例如:
#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
Nested style is very useful when looking at large CSS files: it allows you to easily grasp the structure of the file without actually reading anything.
:expanded
Expanded is a more typical human-made CSS style, with each property and rule taking up one line. Properties are indented within the rules, but the rules aren't indented in any special way. 例如:
#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
:compact
Compact style takes up less space than Nested or Expanded. It also draws the focus more to the selectors than to their properties. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them. 例如:
#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
:compressed
Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It's not meant to be human-readable. 例如:
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
Sass provides a number of advanced customizations for users with unique requirements. Using these features requires a strong understanding of Ruby.
Users can define their own Sass functions using the Ruby API. For more information, see the source documentation.
Sass caches parsed documents so that they can be reused without parsing them again unless they have changed. By default, Sass will write these cache files to a location on the filesystem indicated by :cache_location
. If you cannot write to the filesystem or need to share cache across ruby processes or machines, then you can define your own cache store and set the:cache_store
option. For details on creating your own cache store, please see the {Sass::CacheStores::Base source documentation}.
Sass importers are in charge of taking paths passed to @import
and finding the appropriate Sass code for those paths. By default, this code is loaded from the {Sass::Importers::Filesystem filesystem}, but importers could be added to load from a database, over HTTP, or use a different file naming scheme than what Sass expects.
Each importer is in charge of a single load path (or whatever the corresponding notion is for the backend). Importers can be placed in the {file:SASS_REFERENCE.md#load_paths-option :load_paths
array} alongside normal filesystem paths.
When resolving an @import
, Sass will go through the load paths looking for an importer that successfully imports the path. Once one is found, the imported file is used.
User-created importers must inherit from {Sass::Importers::Base}.