内容简介：基于Gulp完成前端自动化的年代，出于快速上手以及npm安装方便的考虑，开发团队一直沿用
Sass 是成熟、稳定、强大的 CSS预处理器 ，截止到目前为止已经发展有10年，前当最新release版本为 3.5.5 。而 SCSS 是 Sass3 版本当中引入的新语法特性，完全兼容CSS3的同时继承了 Sass 强大的动态功能。本文翻译自 Sass Guide 和 Sass Syntactically Awesome StyleSheets 两篇官方文档，讲解了现代化前端开发当中经常使用的SCSS语法特性，便于开发小组的同学快速上手。
基于Gulp完成前端自动化的年代，出于快速上手以及npm安装方便的考虑，开发团队一直沿用 Less 和 gulp-less 作为CSS预处理工具，但是Sass提供了更加丰富的动态语法特征，因此逐步淘汰基于Gulp的 beaver 前端项目脚手架以后，新项目全部基于Webpack的 node-sass 和 sass-loader 作为预处理工具。Sass和Less的详细比较可以参考 sass-vs-less 和 Sass与Less比拼 两篇文章，里面对两者的优劣做了非常详实的比较。
安装
如果正在使用的是 Linux 发行版，需要通过 apt 安装 Ruby 以及 build-essential 。
➜ sudo apt-get install ruby-dev ➜ gem install sass
命令行当中可以通过 sass input.scss output.css 编译Scss文件，也可以添加 --watch 选项监听Scss文件的变化：
➜ sass --watch input.scss:output.css
如果多个Scss文件放置在一个目录当中，也可以对整个文件目录进行监听。
➜ sass --watch app/sass:public/stylesheets
通过 -i 或者 --interactive 可以运行一个交互式的SassScript命令行。
➜ sass -i >> 5px + 8px 13px
通过 sass --help 获取更多关于SASS在命令行的使用方法。
编码规则
SASS首先会检查代码文件的Unicode BOM（ byte order mark ），然后是 @charset 声明，再然后是底层运行 Ruby 的字符串编码，如果这些都未进行设置，将会默认以 UTF-8 编码输出CSS文件。
@charset 'utf-8';
#app {
background: url('../assets/背景图片.png');
}
建议代码开头位置显式定义 @charset "encoding-name"; ，让SASS能够按照给定的字符集编译输出。
特性概览
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的 变量 、 嵌套 、 混合 、 继承 等特性，让CSS的书写更加有趣与程式化。
变量
变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过 $ 符号去声明一个变量。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
上面例子中变量 $font-stack 和 $primary-color 的 值 将会替换所有引用他们的位置。
body {
font: 100% Helvetica, sans-serif;
color: #333; }
嵌套
SASS允许开发人员以 嵌套 的方式使用CSS，但是 过度的使用嵌套会让产生的CSS难以维护，因此是一种不好的实践 ，下面的例子表达了一个典型的网站导航样式：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
大家注意上面代码中的 ul 、 li 、 a 选择器都被嵌套在 nav 选择器当中使用，这是一种书写更高可读性CSS的良好方式，编译后产生的CSS代码如下：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
引入
SASS能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（ _partial.scss ），SASS会通过这些下划线来辨别哪些文件是 SASS片段 ，并且不让片段内容直接生成为CSS文件，从而只是在使用 @import 指令的位置被导入。CSS原生的 @import 会通过额外的HTTP请求获取引入的样式片段，而SASS的 @import 则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。下面例子中的代码，将会在 base.scss 文件当中引入 _reset.scss 片断。
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
SASS中引入片断时，可以 缺省使用文件扩展名 ，因此上面代码中直接通过 @import 'reset' 引入，编译后生成的代码如下：
html, body, ul, ol {
margin: 0;
padding: 0; }
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef; }
SASS片断使用下划线前缀命名，主要用于 SASS命令行工具 watch指定目录源码的场景；如果使用Webpack等打包 工具 则毋须顾虑该问题，CSS样式将会通过Webpack加载器，按照ES6风格的 import 或Webpack插件 extract-text-webpack-plugin 进行打包和模块化。
混合
混合（ Mixin ）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用 @mixin name 指令来进行混合操作。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
上面的代码建立了一个名为 border-radius 的Mixin，并传递了一个变量 $radius 作为参数，然后在后续代码中通过 @include border-radius(10px) 使用该Mixin，最终编译的结果如下：
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
继承
继承是SASS中非常重要的一个特性，可以通过 @extend 指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式：
// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
.warning {
@extend %message-common;
border-color: yellow;
}
上面代码将 .message 中的CSS属性应用到了 .success 、 .error 、 .warning 上面，魔法将会发生在最终生成的CSS当中。这种方式能够避免在HTML元素上书写多个 class 选择器，最终生成的CSS样式是下面这样的：
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green; }
.error {
border-color: red; }
.warning {
border-color: yellow; }
操作符
SASS提供了标准的算术运算符，例如 + 、 - 、 * 、 / 、 % 。在接下来的例子里，我们尝试在 aside 和 article 选择器当中对宽度进行简单的计算。
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
上面代码以 960px 为基准建立了简单的流式网格布局，SASS提供的算术运算符让开发人员可以更容易的将像素值转换为百分比，最终生成的CSS样式如下所示：
.container {
width: 100%; }
article[role="main"] {
float: left;
width: 62.5%; }
aside[role="complementary"] {
float: right;
width: 31.25%; }
CSS扩展
SASS当中有两种可用的语法，一种是Scss（ 即SASS化的CSS ），这是一种类CSS的语法，以 .scss 作为源码文件后缀。另一种是Sass，提供了比较简明的CSS书写方式，通过缩进而非括号来标识嵌套的选择器，以及使用换行而非分号来分隔各个属性，并使用 .sass 作为代码文件的后缀。
Sass和Scss两种代码风格可以通过 sass-convert 命令行工具进行相互转换：
➜ sass-convert test.scss test.sass ➜ sass-convert test.sass test.scss
日常开发环境下，出于前端开发的使用习惯，更多会选择Scss语法，接下来的内容也将会以Scss风格为主。
嵌套规则
Scss允许CSS规则嵌套使用，父子规则将会呈现 包含选择器 的关系，例如：
/*===== SCSS =====*/
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
/*===== CSS =====*/
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
这样可以避免重复的使用父级选择器，从而达到简化CSS代码结构的目的，例如：
/*===== SCSS =====*/
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}
/*===== CSS =====*/
#main {
width: 97%; }
#main p, #main div {
font-size: 2em; }
#main p a, #main div a {
font-weight: bold; }
#main pre {
font-size: 3em; }
引用父级选择器&
Scss使用 $ 关键字在CSS规则中引用 父级选择器 ，例如在嵌套使用伪类选择器的场景下：
/*===== SCSS =====*/
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
/*===== CSS =====*/
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
无论CSS规则嵌套的深度怎样，关键字 & 都会使用父级选择器 级联替换 全部其出现的位置：
/*===== SCSS =====*/
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
/*===== CSS =====*/
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }
& 必须出现在复合选择器开头的位置，后面再连接自定义的后缀，例如：
/*===== SCSS =====*/
#main {
color: black;
&-sidebar { border: 1px solid; }
}
/*===== CSS =====*/
#main {
color: black; }
#main-sidebar {
border: 1px solid; }
如果在父级选择器不存在的场景使用 & ，Scss预处理器会报出错误信息。
嵌套属性
CSS许多属性都位于相同的命名空间（ 例如 font-family 、 font-size 、 font-weight 都位于 font 命名空间下 ），Scss当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下，请看下面的代码：
/*===== SCSS =====*/
.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
/*===== CSS =====*/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
命令空间上可以直接书写 CSS简写属性 ，但是日常开发中建议直接书写 CSS简写属性 ，尽量保持CSS语法的一致性。
.demo {
font: 20px/24px fantasy {
weight: bold;
}
}
.demo {
font: 20px/24px fantasy;
font-weight: bold;
}
占位符选择器%
占位符选择器与 id 或者 class 选择器的用法类似，只是 # 和 . 需要替换成为 % ，占位符选择器必须通过 @extend 指令进行调用。
关于占位符的讲解，请具体参考章节。
注释
SASS支持标准CSS的多行注释 /* */ 和单行注释 // ，其中，多行注释会完整输出到编译后的CSS文件，而单行注释则不会。
/* 多行注释
* 会原样输出到CSS文件 */
body { color: black; }
// 单行注释不会出现在输出的CSS当中
a { color: green; }
编译成为CSS的结果如下：
@charset "UTF-8";
/* 多行注释
* 会原样输出到CSS文件 */
body {
color: black; }
a {
color: green; }
插值语句 #{$variable} 可以应用在多行注释当中。
$version: "3.5.5";
/* 这段CSS是通过SASS #{$version}生成的。*/
编译成为CSS的结果：
@charset "UTF-8"; /* 这段CSS是通过SASS 3.5.5生成的。*/
当注释中出现中文时，SASS会自动在生成的CSS文件头部添加 @charset "UTF-8"; 。
SassScript
SassScript是Sass提供的一系列CSS语法扩展，允许在任意CSS属性上书写变量、计算以及函数。SassScript还可以通过 interpolation 插值生成选择器和属性名，这在编写 mixins 时非常有用。
变量$
SassScript通过 $ 关键字声明和使用一个变量。
/*===== SCSS =====*/
$width: 8rem; // 声明变量
#main {
width: $width; // 使用变量
}
/*===== CSS =====*/
#main {
width: 8rem; }
SassScript变量支持块级作用域，嵌套规则当中声明的变量都是 局部变量 ，可以通过 !global 将局部变量声明为 全局变量 。
/*===== SCSS =====*/
#menu {
$width: 5rem !global;
width: $width;
}
#sidebar {
width: $width;
}
/*===== CSS =====*/
#menu {
width: 5rem; }
#sidebar {
width: 5rem; }
数据类型
SassScript支持8种数据类型，
- 数值number ：
1.2,13,10px - 颜色color ：
blue、#04a3f9、rgba(255, 0, 0, 0.5) - 布尔值bollean ：
true、false - 空值null ：
null - 字符串string ：有或没有引号，
"menu"、'sidebar'、navbar - 数组list ：由空格或逗号分隔，
1.5em 1em 0 2em, Helvetica, Arial, sans-serif - 对象map ：
(key1: value1、key2: value2) - 函数function 。
Scss支持所有其它类型的CSS属性值，例如Unicode字符或者 !important 声明。Scss并没有对这些类型进行特殊处理，仅仅将其视为没有使用引号的字符串。
String
CSS支持两种类型的字符串：
- 使用单双引号的：
"Lucida Grande"，'http://sass-lang.com'; - 没有使用引号的：
sans-serif，bold;
SassScript能够自动识别这2种字符串，Scss当中使用了哪种类型字符串，就会在生成的CSS文件原样输出该类型字符串。
但是这里存在一个意外，当使用 #{} 插值语法的时候，使用引号的字符串会失去引号，这样可以便于 mixin 中使用选择器的名称。
/*===== SCSS =====*/
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
/*===== CSS =====*/
body.firefox .header:before {
content: "Hi, Firefox users!"; }
List
SASS当中可以通过List来表达CSS声明的值，例如 margin: 10px 15px 0 0 或 font-face: Helvetica, Arial, sans-serif 。SASS中的List是一系列由空格或者逗号分隔的值，实际上单个值也可以作为一个List，即只拥有一项元素的List。
List本身的作用不多，但是通过SassScript的List函数可以让它发挥更大的作用。 nth 函数可以操作List中的每一项元素， join 函数能够合并多个List在一起， append 函数能够向List添加一项元素，而 @each 指令可以为List当中每项元素添加样式。
除了包含简单的值，List还可以包含其它的List，例如拥有2项元素的List 1px 2px, 5px 6px 包含了 1px 2px 和 5px 6px 两个List，如果内部的List和外部List拥有相同的分隔符，那么必须使用圆括号 () 标识内部List的起始和结束位置，例如 (1px 2px) (5px 6px) 。
当List被转换为普通CSS的时候，SASS不会添加其它圆括号，这意味 (1px 2px) (5px 6px) 和 1px 2px 5px 6px 变成CSS的时候结果是相同的。但是无论如何，它们在SASS里是不相同的， (1px 2px) (5px 6px) 是一个拥有2个List元素的List， 1px 2px 5px 6px 则是拥有4个普通元素的List。
List里同样可以不包含任何元素，这样的List会被表现为 () （ 同样可以认为其是一个空的map ），它们并不能直接输出为CSS。例如SASS编译 font-family: () 时将会发生错误。如果List包含一个空的List () 或者其本身为空值 null ，例如对于 1px 2px () 3px 或 1px 2px null 3px 当中的 null 和 () 将会在输出的CSS当中被移除。
逗号分隔的List尾部可能还跟着一个逗号，这在一些特殊的情况下比较有用，例如展现一个只有1个元素的List， (1,) 就是一个包含了元素 1 的List，而 (1 2 3,) 是一个逗号分隔的List，这个List又包含着一个空格分隔的List，空格分隔的List拥有着 1 、 2 、 3 三个元素。
List也可以通过方括号 [] 编写， 方括号编写的List 用来在CSS Grid布局中表达行的名称，但是它同样也可以用于纯SASS代码，同样也可以通过逗号或者空格进行分隔。
Map
Map提供了 key 与 value 之间的关联关系，并且能够通过 key 找到相应的 value 。他们可以容易的搜集 value 到一个被命名的分组，然后动态的操作这些分组。它们在CSS中没有直接并行的概念，尽管在句法上与媒体查询表达式相似：
$map: (key1: value1, key2: value2, key3: value3);
不同与前面提到的List，Map必须总是被圆括号 () 包裹，并且必须使用逗号 , 进行分隔。Map中的 key 与 value 可以是任意的SassScript对象，一个Map可以只拥有1个给定的 key 和对应的 value （ 可以是一个List ），但是一个给定的 value 可能会关联到多个 key 。
和List一样，Map大部分情况下也需要通过SassScript函数对其进行操作。其中 map-get 函数负责查询Map中的 value ， map-merge 函数添加 value 至Map，指令 @each 可以被用来为Map中的每个 key 和 value 添加样式。Map中键值对的顺序总是与其被建立的时候相同。
List能够使用的位置，Map也能正常使用。当通过一个List函数进行使用的时候，Map被视为拥有键值对的List。例如： (key1: value1, key2: value2) 在List函数当中将被视为一个嵌套的List（ 即 key1 value1, key2 value2 ）。但是，值得注意的是，List并不能相反的被视为一个Map，尽管空的List将会抛出错误。 () 即可以被视为一个没有 key 和 value 的Map，也可以视为没有元素项的List.
注意Map的 key 可以是任意的Sass数据类型（ 即使是Map ），并且声明Map的语法允许任意的SassScript表达式，该表达式将会被解析以决定 key 的值。
Map并不能被转换为普通CSS，在CSS函数中使用它作为变量和参数的值将会导致错误。这种情况下，建议使用 inspect($value) 函数为Map的调试生成一个有用的字符串输出。
Color
任何CSS颜色表达式都返回一个SassScript色彩值，这包括大量被命名的颜色，它们与未引用的字符串是不可区分的。
在压缩输出模式下，Sass将输出颜色的最小的CSS表示。例如，在压缩模式下， #FF0000 将输出为红色 red ，而 #FFEBCD 将会输出为白杏色 blanchedalmond 。
用户使用 被命名的颜色 时，经常会遇到一个问题：在。。。SASS喜欢在其他输出模式中键入相同的输出格式。。。之后，一个颜色会被插值到一个选择器，代码压缩时这将会变成不合法的语法。要避免这个问题，在被命名颜色用于构建选择器的时候，总是需要为它们添加引号。
First-Class Function
get-function($function-name) 将会返回一个函数引用，该函数能够被传递到 call($function, $args...) 并得到调用。First-Class函数不能直接用于CSS输出，任何这样的尝试都将会引发错误。
运算
SassScript所有数据类型都支持 ==或!= 逻辑运算，但是每种数据类型还拥有自己的运算方式。
数值运算
数值类型支持常见的数值运算 + 、 - 、 * 、 / 、 % ，并在必要时在不同的 绝对 数值单位之间转换。SASS数学函数会在计算过程中保留单位，这意味不同单位不能在一起进行运算（ 例如 px 和 em ），两个相同单位的数值相乘后可能会造成运算结果的单位重复，例如： 10px * 10px == 100px * px ，显然这里 px * px 是一个无效单位，此时SASS会由于使用非法单位而报错。
关系运算符 < 、 > 、 <= 、 >= 同样支持数值类型，而相等运算符 == , != 则可以被SASS所有类型所支持。
除法与标识符 /
CSS允许在属性值中使用 / 作为分隔数字的手段，SassScript为CSS属性语法提供了一个扩展，允许 / 作为除法运算符来使用。如果SassScript当中2个数值通过 / 进行分隔，那么它们的计算结果将会出现在生成的CSS当中。
/ 被解释为除法的情况主要有以下3种：
()
例如：
/*===== SCSS =====*/
p {
font: 10px/8px; // 普通CSS，未进行除法运算。
$width: 1000px;
width: $width/2; // 使用一个变量，进行了除法运算。
width: round(1.5)/2; // 使用一个函数，进行了除法运算。
height: (500px/2); // 使用圆括号, 进行了除法运算。
margin-left: 5px + 8px/2px; // 使用了加号+, 进行了除法运算。
font: (italic bold 10px/8px); // 在List当中，圆括号不会进行计算。
}
/*===== CSS =====*/
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
如果需要在普通CSS当中使用变量，可以通过 #{} 去插入它们，例如：
/*===== SCSS =====*/
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
/*===== CSS =====*/
p {
font: 12px/30px; }
减法、负数与标识符 -
中划线 - 在CSS和SASS中有许多不同的意义，可以表达一个减法运算符（ 5px - 3px ），一个负数的开始（ -23px ），一元负值运算符（ -$var ），或者一个标识符的组成部分（ font-weight ），大部分情况下何时何地使用是比较清晰的，但也存在一些例外情况，为了避免这些例外需要遵循如下原则：
10px (-$var)
不同含义的表达遵循如下的优先次序：
- 表达式中使用字母时，
a-1表示一个没有引号的字符串，其值为"a-1"。但是唯一的例外在于单位的使用，比如5px-3px与5px - 3px是等效的，其执行结果为2px。 - 两个数字之间没有空格意味着这是一个减法，所以
1-2与1 - 2作用相同。 - 将
-放置在数字开头表示这是一个负数，所以1 -2是一个包含了1和-2两个元素的List。 - 两个数字之间不考虑空格表示这是减法，所以
1 -$var和1 - $var相同。 - 放置在一个值的前面表示这是一元负值运算符，该运算符会返回当前数值的负值。
➜ hank ✗ sass -i >> a-1 "a-1" >> 5px-3px 2px >> 1 -2 (1 -2) >> 1-2 -1
颜色运算
SASS中所有的数学运算都分段的支持颜色值，即分别对 红 、 绿 、 蓝 依次进行计算。
/*===== SCSS =====*/
p {
color: #010203 + #040506;
}
在执行完 01 + 04 = 05 ， 02 + 05 = 07 ， 03 + 06 = 09 运算后编译为下面的CSS：
/*===== CSS =====*/
p {
color: #050709; }
通常来说，使用 颜色函数 比使用 颜色运算 能更加有效的达到相同目的。 颜色运算 同样也可以作用于数值与颜色值，并且依然是分段进行的，例如：
p {
color: #010203 * 2;
}
进行 01 * 2 = 02 ， 02 * 2 = 04 ， 03 * 2 = 06 运算后编译为下面CSS：
p {
color: #020406; }
注意，带有alpha通道的颜色（ 使用 rgba 或 hsla 函数创建的颜色 ）必须具有相同的alpha值单位，以便与其执行颜色运算。
/*===== SCSS =====*/
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
/*===== CSS =====*/
p {
color: rgba(255, 255, 0, 0.75); }
颜色的alpha通道可以通过 opacify 和 transparentize 函数进行修改，例如：
/*===== SCSS =====*/
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3); // 增加alpha通道值
background-color: transparentize($translucent-red, 0.25); // 减少alpha通道值
}
/*===== CSS =====*/
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }
IE的filter滤镜要求所有颜色都包括alpha层，并且严格采用 #AABBCCDD 格式，SASS提供了 ie_hex_str 函数能够更加简便的对颜色值进行转换，例如：
/*===== SCSS =====*/
$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)}');
}
/*===== CSS =====*/
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#FF00FF00', endColorstr='#80FF0000'); }
字符串运算
SassScript使用 + 运算符执行 字符串连接 操作。
/*===== SCSS =====*/
p {
cursor: e + -resize;
}
/*===== CSS =====*/
p {
cursor: e-resize; }
注意，如果有引号的字符串被添加到没有引号的字符串（ 即带引号的字符串在 + 的左侧 ），生成的字符串将会是 有引号 的。同理，如果将没有引号的字符串添加到有引号的字符串（ 即没有引号的字符串在 + 的左侧 ），则结果为 没有引号 的字符串。
/*===== SCSS =====*/
p:before {
content: 'Foo ' + Bar; // 有引号字符串 + 无引号字符串 = 有引号字符串
font-family: sans- + 'serif'; // 无引号字符串 + 有引号字符串 = 无引号字符串
}
/*===== CSS =====*/
p:before {
content: "Foo Bar";
font-family: sans-serif; }
默认情况下，临近的两个CSS属性值可以通过 空格 进行连接。
/*===== SCSS =====*/
p {
margin: 3px + 4px auto;
}
/*===== CSS =====*/
p {
margin: 7px auto; }
字符串里可以通过 #{} 插入动态的值，就像下面这样：
/*===== SCSS =====*/
p:before {
content: "I ate #{5 + 10} pies!";
}
/*===== CSS =====*/
p:before {
content: "I ate 15 pies!"; }
如果字符串插值 #{} 中的变量是空值，则插值表达式的结果将被视为空字符串。
/*===== SCSS =====*/
$value: null; // 空值
p:before {
content: "I ate #{$value} pies!";
}
/*===== CSS =====*/
p:before {
content: "I ate pies!"; }
布尔运算
SassScript当中布尔类型的值支持 与and 、 或or 、 非not 运算。
/*===== SCSS =====*/
$year: 2018;
$moth: 8;
$day: 6;
$name: Hank;
#app {
@if ($year > 2010 and $moth==8 or $day==6 not $name==Hank) {
color: blue;
} @else {
color: red;
}
}
/*===== CSS =====*/
#app {
color: blue; }
List运算
数组不支持任何特定的计算方式，只能通过 list函数 进行操作，下面代码是一个使用了 hsl($hue, $saturation, $lightness) 函数的例子：
/*===== SCSS =====*/
a {
color: hsl(120deg, 100%, 50%)
}
/*===== CSS =====*/
a {
color: lime; }
圆括号
SASS中可以通过圆括号 {} 来调整运算的优先级。
/*===== SCSS =====*/
p {
width: 1em + (2em * 3);
}
/*===== CSS =====*/
p {
width: 7em; }
函数
SassScript内置了许多有用的函数，可以通过普通的CSS语句进行调用。
/*===== SCSS =====*/
p {
color: hsl(0, 100%, 30%);
}
/*===== CSS =====*/
p {
color: #990000; }
关键词参数
Sass函数还允许通过 关键词参数 (即 带有键名的参数 )进行调用，上面的例子也可以改写为下面代码：
/*===== SCSS =====*/
p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 30%);
}
/*===== CSS =====*/
p {
color: #990000; }
虽然这不是很简洁，但可以使样式表更加容易阅读。同时还能够让函数提供更灵活的接口，提供多个参数的同时，并不会变得难以调用。
命名参数能够以任何顺序进行传递，而带有默认值的参数可以省略掉。如果命名参数是变量名，那么下划线与破折号可以互换使用。
可以通过 Sass::Script::Functions 查看SASS函数及其参数名称的完整清单，也可以通过Ruby进行自定义。
插值 #{}
开发人员可以通过 插值 （ interpolation ） #{} 在选择器和属性名称中使用SassScript变量。
/*===== SCSS =====*/
$name: uinika;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
/*===== CSS =====*/
p.uinika {
border-color: blue; }
还可以使用 #{} 将SassScript放入属性值，大多数情况下这种方式并不优于变量，但是使用 #{} 意味着其附近的任意操作都将被视为普通CSS，例如：
/*===== SCSS =====*/
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
/*===== CSS =====*/
p {
font: 12px/30px; }
SassScript中的 &
如同使用选择器一样，SassScript中的 & 引用着当前的 父选择器列表 （ 一个由逗号分隔List作为元素再通过空格进行分隔的List ）。
.navbar.text .sidebar.word,
.menu.item {
$selector: &;
}
上面代码中 $selector 的值为 ((".navbar.text" ".sidebar.word"), ".menu.item") ，这里的复合选择器使用了引号 " 标识它是一个字符串，但是真实情况它可能是没有引号的。即使其父选择器并没有包含逗号和空格， & 依然会拥有两层嵌套，因此它能够被持续的访问。
当 父级选择器列表 不存在的时候， & 运算符的值为 null ，使用 mixin 当中可以通过该特性判断 父选择器列表 是否存在。
@mixin does-parent-exist {
@if & {
&:hover {
color: red;
}
}
@else {
a {
color: red;
}
}
}
变量默认值 !default
可以在变量后添加 !default 声明，如果变量已被赋值就不会再被重新进行赋值，如果变量未被赋值，则会被赋予新值。
/*===== SCSS =====*/
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
/*===== CSS =====*/
#main {
content: "First content";
new-content: "First time reference"; }
如果变量的值是 null ，则会被 !default 视为没有赋值。
/*===== SCSS =====*/
$content: null;
$content: "Non-null content" !default;
#main {
content: $content;
}
/*===== CSS =====*/
#main {
content: "Non-null content"; }
@规则与指令
SASS支持所有CSS3的 @-Rules 规则，以及SASS特有的 #Directive 指令。
@import / #import
SASS拓展了CSS的 @import 允许其导入 .scss 或 .sass 文件，导入的文件将合并、编译到一个CSS文件，文件中的变量和mixin都可以在导入的主文件当中使用。
SASS会基于当前目录查找其它文件，以及Rack、Rails或者Merb下的SASS文件目录。可以通过 :load_paths 或 --load-path 选项指定额外的搜索目录。
@import 通过指定路径以及文件名来引入SASS文件，但是在下面4种情况当中， @import 仅被编译为普通的CSS语句：
.css http:// url() @import
/*===== SCSS =====*/ @import "app.css"; @import "pp" screen; @import "https://uinika.github.io/app"; @import url(app); /*===== CSS =====*/ @import url(app.css); @import "pp" screen; @import "https://uinika.github.io/app"; @import url(app);
除上述四种情况外，文件拓展名为 .scss 或 .sass 的情况都会进行预编译处理，即使 文件拓展名缺省 依然能够正确的进行导入。
// 下面2种导入方式等效 @import 'base'; @import 'base.scss;
SASS允许在一个 @import 语句内同时导入多个文件。
@import 'base', 'reset', 'app';
@import 语句内可以有限制的使用 #{} 插值，即不能动态的导入基于变量的SASS文件，只能用于标准CSS的 @import url(""); 导入方式。
/*===== SCSS =====*/
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
/*===== CSS =====*/
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Partial
如果你引入一个SCSS或Sass文件，但并不希望它们编译成CSS文件，那么可以在文件名开头添加一个下划线 _ ，这样Sass将不会把该文件编译成CSS文件，然后引入文件的时候不需要添加下划线。例如：你拥有一个 _colors.scss ，但是Sass并不会创建 _colors.css 文件，然后，不过仍然可以通过 @import "colors"; 语句引入 _colors.scss 文件。
注意，不能在同一目录中包含相同名称的Partial和非Partial；例如： _colors.scss 不能与 colors.scss 在相同目录下并存。
嵌套的@import
大多数情况下，在代码的顶层使用 @import 导入是最为常用，但是我们依然可以在 CSS规则 和 @media规则 中使用；其效用如同基本的 @import ，仍然会去包含引入文件的内容。
/*===== SCSS =====*/
// 文件demo.scss包含如下代码
.demo {
color: red;
}
#app {
@import "demo"; // 在文件app.scss中引入demo.scss
}
/*===== CSS =====*/
#app .demo {
color: red;
}
指令只能用于文档的基本级别，在一个嵌套上下文当中被 @import 引入的文件里，诸如 @mixin 或者 @charset 是不被允许的。
不能在 mixin 或者 控制指令 当中嵌套使用 @import 。
@media / #media
Sass中 @media 的用法与CSS相同，但是允许在CSS规则中嵌套使用。编译时 @media 将被编译到文件最外层，包含嵌套的父级选择器。
/*===== SCSS =====*/
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
/*===== CSS =====*/
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@media 的查询条件可以嵌套使用，编译后SASS会自动添加 and 关键字。
/*===== SCSS =====*/
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
/*===== CSS =====*/
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@media 的查询条件当中也可以使用SassScript。
/*===== SCSS =====*/
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
/*===== CSS =====*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px;
}
}
@extend / #extend
现实的Web页面开发场景当中，当一个 class 属性拥有其它多个 class 所具备样式的时候，通常的做法是在HTML上书写全部这些 class ，如同下面的代码：
<div class="error seriousError">
Oh no! You've been hacked!
</div>
<style>
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
</style>
这样的代码并不利于维护，并且会带来非语义相关的样式到HTML上。
使用SASS提供的 @extend 可以在不同CSS选择器之间继承样式，从而完美避免上述问题。
/*===== SCSS =====*/
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
/*===== CSS =====*/
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
上面代码中 .error 的样式会自动应用到 .seriousError ，作用相当于同时使用了这两个 class 上的样式。
通过 .error 定义的其它样式规则，同样会在 .seriousError 上工作，比如下面这样定义样式后。
.error.danger {
background-image: url("/image/warning.png");
}
然后 <div class="seriousError danger"> 的背景图片同样会是 warning.png 。
工作原理
@extend 是通过向被继承的CSS选择器，插入需要继承的CSS选择器来进行工作，例如上面例子的代码转换如下：
/*===== SCSS =====*/
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.danger {
background-image: url("/image/warning.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
/*===== CSS =====*/
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.danger, .seriousError.danger {
background-image: url("/image/warning.png"); }
.seriousError {
border-width: 3px; }
合并选择器的时候， @extend 将会避开不必要的样式规则重复，并且不会生成不能匹配任何东西的选择器。
继承复杂的选择器
class 选择器并不是唯一能被继承的选择器，其它选择器也可以被继承，甚至可以去继承一个CSS元素，接着看下面的代码：
/*===== SCSS =====*/
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
/*===== CSS =====*/
a:hover, .hoverlink {
text-decoration: underline; }
就像前面内容中的 .error.intrusion 一样， a:hover 上定义的规则也会在 .hoverlink 上工作，即使它们拥有着其它的选择器。
/*===== SCSS =====*/
.hoverlink {
@extend a:hover;
}
.comment a.user:hover {
font-weight: bold;
}
/*===== CSS =====*/
.comment a.user:hover, .comment .user.hoverlink {
font-weight: bold; }
多重继承
一个选择器可以同时继承多个选择器的样式，例如：
/*===== SCSS =====*/
.error {
border: 1px #f00;
background-color: #fdd;
}
.attention {
font-size: 3em;
background-color: #ff0;
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
/*===== CSS =====*/
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.attention, .seriousError {
font-size: 3em;
background-color: #ff0;
}
.seriousError {
border-width: 3px;
}
上面代码中，每个 .seriousError 旁边都会伴随 .error 和 .attention 选择器。通常，文档后面定义的样式将会采取这样的优先级规则： .seriousError 的背景色是 #ff0 而非 #fdd ，因为 .attention 定义的位置比 .error 更加靠后.
多重继承时还可以使用逗号 , 分隔的选择器列表，例如： @extend .error, .attention 作用与 @extend .error; @extend .attention; 等效。
链式继承
一个选择器可以继承另外一个选择器，另外一个选择器又继承了第三个选择器，从而形成链式的继承结构。
/*===== SCSS =====*/
.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%;
}
/*===== CSS =====*/
.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%; }
上面代码中，所有使用 .error 的位置也会使用 .seriousError ，同时使用 .seriousError 和 .error 的位置则都会使用到 .criticalError 。
选择器序列
诸如 .foo .bar or .foo + .bar 这样的选择器队列目前还不能被继承，但是嵌套选择器本身是可以使用 @extend 实现继承的，例如:
/*===== SCSS =====*/
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
#fake-links .link {
@extend a;
}
/*===== CSS =====*/
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
有时候选择器序列会继承出现在另一个序列中的选择器，这种情况下就需要合并两个序列，例如：
/*===== SCSS =====*/
#admin .tabbar a {
font-weight: bold;
}
#demo .overview .fakelink {
@extend a;
}
由上面代码在技术上可能匹配2个选择器序列当中的每个序列，可能导致生成的CSS样式体积较大。因此如果例子中需要10个选择器，Sass将会只会生成一个有效的选择器。
当被合并的2个选择器序列没有共同的选择器时，那么将会生成2个新的选择器：第1个选择器序列在第2个之前，以及第2个选择器序列在第1个之前，就像下面这样：
/*===== CSS =====*/
#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
font-weight: bold; }
如果需要合并的2个选择器序列共享了部分选择器，那么这些共享的选择器将会被合并，只有不同的选择器会发生变化。下面的例子中，两个选择器序列都包含 #admin ，所以编译结果会合并这两个ID选择器。
/*===== SCSS =====*/
#admin .tabbar a {
font-weight: bold;
}
#admin .overview .fakelink {
@extend a;
}
/*===== CSS =====*/
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
font-weight: bold; }
只能@extend的选择器
有些时候，你只想为需要去 @extend 继承的Class选择器编写样式，并且不希望直接使用到HTML。在编写Sass库的时候，你可能要为使用者提供 @exnted 继承的样式，并且使用者如果不需要可以选择忽略。
如果使用普通的Class选择器，会生成更多额外的CSS。而且可能与其它Class选择器发生样式冲突，因此Sass提供了 占位选择器 （ placeholder selectors ），例如 %foo 。
占位选择器的外观看起来与Class或者ID选择器类似，只是 # 和 . 被 % 所替代。占位选择器可以出现在任意Class和ID选择器能够使用的位置，并能够防止其中定义的规则集被渲染为CSS。
/*===== SCSS =====*/
// This ruleset won't be rendered on its own.
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
/*===== CSS =====*/
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
!optional
当继承一个选择器的时候，如果 @extend 没有工作将会发生错误，例如对于 a.important {@extend .notice} ，如果当前文档没有包含 .notice 选择器就会发生错误。如果被包含的这个选择器 .notice 是 h1.notice ，由于 h1 与 a 具有冲突，因此没有新的选择器将会被创建。
如果希望 @extend 不生成任何选择器，可以在选择器后面添加 !optional 标志，例如：
a.important {
@extend .notice !optional;
}
在指令中使用@extend
在 @media 之类的指令中使用 @extend 会存在一些限制，Sass不能让 @media 代码块之外的CSS规则应用到其内部的选择器，从而避免四处拷贝样式并新建大量的样式块。这意味如果在 @media 或其它CSS指令中使用 @extend ，那么就只能继承当前指令块内出现的选择器。
例如下面的代码工作状态良好：
@media print {
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
}
但是这样的代码就是 错误 的：
.error {
border: 1px #f00;
background-color: #fdd;
}
@media print {
.seriousError {
// 无效的继承，因为.error定义在@media print指令的外面
@extend .error;
border-width: 3px;
}
}
希望有一天浏览器能够原生支持 @extend ，并允许它用于 @media 或其它指令当中。
@at-root / #at-root
某些需要放置在文档根元素上的样式，可以就近的放置在其父选择器上，该特性同样可用于行内CSS选择器。
/*===== SCSS =====*/
.parent {
...
@at-root .child { ... }
}
/*===== CSS =====*/
.parent { ... }
.child { ... }
@at-root 可以通过 代码块 同时包含多个选择器。
/*===== SCSS =====*/
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
/*===== CSS =====*/
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
@at-root 默认情况下仅仅是排除掉父级选择器，但是实际开发过程中也有可能需要将 @media 之类的指令选择性的过滤、移动到外面，这里可以通过 @at-root (without: ...) 和 @at-root (with: ...) 语法实现该操作。
/*===== SCSS =====*/
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}
/*===== CSS =====*/
@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}
可以向 @at-root 传递2个特殊值， rule 表示普通的CSS规则，因此 @at-root (without: rule) 作用类似于没有任何查询条件的 @at-root ； all 代码全部CSS规则， @at-root (without: all) 代表样式将会被移动到所有指令和CSS规则的外侧。
@debug
@debug 指令打印SassScript表达式的值到标准错误输出流，可以用来调试具有复杂SassScript的SASS文件，例如：
/*===== SCSS =====*/ @debug 10em + 12em; /*===== CSS =====*/ Line 1 DEBUG: 22em
@warn
@warn 指令打印SassScript表达式的值到标准错误输出流，在警告用户弃用库或者修复 mixin 轻微错误的场景比较有用， @warn 和 @debug 存在2个主要区别：
可以使用 --quiet 命令行选项或SASS的 :quiet 选项来关闭 @warn 警告。
样式表trace将与消息一起被打印，开发人员可以方便的看到 @warn 警告发生在样式表的哪里个位置。
/*===== SCSS =====*/
@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;
}
@error
@error 指令抛出一个SassScript表达式的值作为致命错误，其中包含了友好的堆栈trace，可以用来验证 mixin 和 function 的参数，例如：
@mixin adjust-location($x, $y) {
@if unitless($x) {
@error "$x may not be unitless, was #{$x}.";
}
@if unitless($y) {
@error "$y may not be unitless, was #{$y}.";
}
position: relative;
left: $x;
top: $y;
}
SASS当前还没有提供捕获 @error 的方式。
控制指令和表达式
SassScript支持一些基本的控制指令和表达式，例如只在某些条件下包含样式，或是在多次变化中包含相同的样式。
控制指令属于高级特性，并不经常使用，主要用于 mixins 当中，尤其是对于Compass这样的库。
if()
内置的 if() 函数允许在一个条件处理分支返回两种可能的结果，它可以用于任意的脚本上下文。 if() 函数只能判断相应的那个参数并且返回，这允许引用已经被定义或者计算的变量，否则将会导致错误发生（ 例如除以零 ）。
/*===== SCSS =====*/
div {
width: if(true, 1px, 2px);
height: if(false, 1px, 2px);
}
/*===== CSS =====*/
div {
width: 1px;
height: 2px; }
@if
@if 指令接收一个SassScript表达式，当表达式返回 false 或者 null 之外的数据时，会选择使用接下来的嵌套语句，
/*===== SCSS =====*/
p {
@if 1+1==2 {
border: 1px solid;
}
@if 5 < 3 {
border: 2px dotted;
}
@if null {
border: 3px double;
}
}
/*===== CSS =====*/
p {
border: 1px solid; }
@if 语句后面可以跟随多个 @else if 语句和一个 @else 语句，如果 @if 语句失败，SASS将逐个尝试 @else if 语句，直至其中一个成功；如果全部失败，则会执行 @else 语句。例如：
/*===== SCSS =====*/
$type: monster;
p {
@if $type==ocean {
color: blue;
}
@else if $type==matador {
color: red;
}
@else if $type==monster {
color: green;
}
@else {
color: black;
}
}
/*===== CSS =====*/
p {
color: green; }
@for
@for 指令用于重复输出一组样式，每次重复时都会存在一个计数器变量用于调整输出结果。该指令拥有 @for $var from <start> through <end> 和 @for $var from <start> to <end> 两种形式。
$var 可以是任意变量名（例如 $i ）， <start> 和 <end> 是返回整数的SassScript表达式，如果 <start> 大于 <end> ，那么计数器将会进行递减而非递增。
@for 指令会设置 $var 为指定范围内的连续数值，对于 from...through 数值范围包括 <start> 和 <end> 的值，对于 from...to 会从 <start> 开始运行，但不会包括 <end> 的值。
/*===== SCSS =====*/
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
/*===== CSS =====*/
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
@each
@each 指令的使用格式为 @each $var in <list or map> ，其中 $var 可以是任意变量名称（ 例如 $length 或 $name ），而 <list or map> 是一个返回 list 或者 map 的SassScript表达式。
@each 规则设置 $var 为 list 或 map 当中的每一项，输出样式中将会使用 $var 的实际值。
/*===== SCSS =====*/
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
/*===== CSS =====*/
.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"); }
多重赋值
@each 指令能够以 @each $var1, $var2, ... in <list> 的格式使用多个变量，如果 <list> 是一个列表中的列表元素，那么子列表中的每个元素将会被分配至各自的变量，例如：
/*===== SCSS =====*/
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
/*===== CSS =====*/
.puma-icon {
background-image: url("/images/puma.png");
border: 2px solid black;
cursor: default; }
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
border: 2px solid blue;
cursor: pointer; }
.egret-icon {
background-image: url("/images/egret.png");
border: 2px solid white;
cursor: move; }
由于 maps 被视为一个键值对的列表，所以多重赋值也能够正常的工作，例如：
/*===== SCSS =====*/
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
/*===== CSS =====*/
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
@while
@while 指令可以用来重复输出嵌套的样式，直至SassScript表达式返回结果为 false ，可以用于实现比 @for 语句更复杂的循环，但日常开发较少使用。
/*===== SCSS =====*/
$i: 6;
@while $i>0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
/*===== CSS =====*/
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
Mixin指令
混入（ Mixin ）可以用来定义Web应用当中需要 复用 的样式，避免出现 .float-left 这样的无语义class。 混入 里可以包含CSS规则以及SASS语法，甚至可以携带参数和引入变量，从而方便的生成各种灵活的样式。
定义混入： @mixin
混入（ Mixin ）通过SASSR提供的 @mixin 指令来定义，后面跟随混入的名称与参数以及内容块，例如下面代码定义了一个名为 large-text 的Mixin：
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混入Mixin当中可以同时包含选择器和CSS属性，其中选择器还可以包含父级的选择器，例如：
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & {
height: 1px
}
}
因为历史原因，混入Mixin的名字以及其它SASS标识符可以互换连字符 - 和下划线 _ ，例如对于名称为 add-column 的混入，也可以将其视为 add_column ，反之亦然。
包含混入： @include
@include 指令通过混入的名称和可选的参数，可以引入特定的混入Mixin至文档，从而包含并复用其样式，例如下面代码：
/*===== SCSS =====*/
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
/*===== CSS =====*/
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
混入Mixin可以包含在其它规则之外，只要它们不直接定义CSS属性或使用父选择器引用，例如：
/*===== SCSS =====*/
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
/*===== CSS =====*/
a {
color: blue;
background-color: red; }
混入Mixin也可以包含其它的混入，接下来看下面的代码：
@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background {
background-color: #fc0;
}
@mixin header-text {
font-size: 20px;
}
事实上，混入Mixin还可以包含自己，但是在SASS 3.3版本之前，这种递归调用的行为是被禁止的。另外，只有定义了后代选择器的混入Mixin可以安全的混入源文件的顶层。
参数
混入Mixin可以使用SassScript的值作为参数，参数被包括在混入当中并作为为变量提供给其内部使用。多个参数通过逗号 , 分隔，然后通过传递对应顺序的参数进行调用，例如：
/*===== SCSS =====*/
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include sexy-border(blue, 1in);
}
/*===== CSS =====*/
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
混入Mixin可以通过变量赋值语法为参数指定默认值，调用的时候如果缺省参数，则使用默认值代替，例如：
/*===== SCSS =====*/
// 定义参数$width的默认值为1
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include sexy-border(blue);
}
h1 {
@include sexy-border(blue, 2in);
}
/*===== CSS =====*/
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; }
关键字参数
混入Mixin在通过 @include指令 进行引入时也可以使用显式的关键字参数，例如可以将上面例子改写为：
p {
@include sexy-border($color: blue);
}
h1 {
@include sexy-border($color: blue, $width: 2in);
}
虽然上面的方式不够简明，但能够使Scss代码更加容易阅读，并让函数接口更加灵活，并方便的进行多参数的混入。命名参数可以按照任意顺序进行传递，如果有默认值可以省略。并且由于命名参数本质上是变量名称，因此下划线 _ 和连字符 - 可以互换使用。
尾部逗号
如果传入 混入Mixin 或者 函数Function 的最后一个参数是位置性的或关键字风格的，那么可以在这个参数后面跟随一个逗号 , ，这种编码风格可以更加简洁的进行重构，并且减少语法错误。
可变参数
有些场景下， 混入Mixin 或者 函数Function 的参数个数是不确定的，例如创建一个可以接收任意数量参数的 box-shadow 混入。SASS里可以通过 ... 符号添加 可变参数 支持，将所有剩余的参数包装到一个列表List。
/*===== SCSS =====*/
@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);
}
/*===== CSS =====*/
.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; }
可变参数可以包含任意需要传递给 混入Mixin 或者 函数Function 的关键字参数，它们可以通过 keywords($args) 函数 进行访问，该函数将会返回一个Map，将它们作为一个从字符串（ 不包含 $ ）到值的映射返回。
可变参数也可以在调用Mixin的时候使用，使用相同的语法能够扩展一个值的列表List，以便每个值作为单独的参数传入；或者扩展值的Map，从而使每个键值对都会作为一个关键字参数来进行处理。例如：
/*===== SCSS =====*/
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
// 使用List作为参数
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
// 使用Map作为参数
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
@include colors($value-map...);
}
/*===== CSS =====*/
.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff; }
.secondary {
color: #00ff00;
background-color: #0000ff;
border-color: #ff0000; }
可以同时传递一个List和一个Map参数，只要List参数位于Map类型参数之前，例如 @include colors($values..., $map...) 。
我们可以通过可变参数包装Mixin并添加额外样式，而不改变Mixin的参数签名。这样 参数 将会通过被包装的Mixin直接进行传递，例如：
@mixin wrapped-stylish-mixin($args...) {
font-weight: bold;
@include stylish-mixin($args...);
}
.stylish {
// $width参数将会以关键字的形式传递到stylish-mixin
@include wrapped-stylish-mixin(#00ff00, $width: 100px);
}
传入内容块到Mixin
样式块可以传递到混入Mixin所包含样式的位置，它们会出现在Mixin内任意 @content 指令的位置，从而能够定义关联到选择器和指令的构造的抽象。
/*===== SCSS =====*/
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
/*===== CSS =====*/
* html #logo {
background-image: url(/logo.gif); }
同样的Mixin可以在简写语法的 .sass 文件中完成（ @mixin 和 @include 分别用 = 和 + 表示 ）。
=apply-to-ie6-only
* html
@content
+apply-to-ie6-only
#logo
background-image: url(/logo.gif)
注意： 当 @content 指令被指定多次或者位于一个循环当中，样式块将会在每次调用中被复制并引用。
有些Mixin可能需要传入一个内容块，或者根据是否传入内容块而具备不同的行为。当内容块传递至当前Mixin的时候， content-exists() 函数将会返回 true ，从而该函数可以用于帮助实现这类行为。
变量作用域与内容块
传递给Mixin的内容块会在其定义的作用域中进行运算，而非混入Mixin的作用域。这意味Mixin当中的局部变量不能传递至样式块，并将其解析为全局值使用。
/*===== SCSS =====*/
$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors {
color: $color;
}
}
/*===== CSS =====*/
.colors {
background-color: blue;
color: white;
border-color: blue; }
此外，这还清楚的表明，在被传递的内容块中使用的变量与Mixin，会关联到内容块定义位置的其它样式。
/*===== SCSS =====*/
@mixin smartphone {
@content;
color: gold;
}
#sidebar {
$sidebar-width: 300px;
width: $sidebar-width;
@include smartphone {
width: $sidebar-width / 3;
}
}
/*===== CSS =====*/
#sidebar {
width: 300px;
width: 100px;
color: gold; }
函数指令
SASS支持开发人员自定义函数，并且在任意值或脚本上下文里使用，例如：
/*===== SCSS =====*/
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {
width: grid-width(5);
}
/*===== CSS =====*/
#sidebar {
width: 240px; }
正如上面代码所展示的，函数可以访问任意全局变量并接收参数，其行为类似一个混入Mixin。函数可以包含语句，并且必须调用 @return 来设置函数的返回值。
与Mixin一样，SASS可以通过关键字参数调用自定义函数，因此可以像下面这样调用上面例子中的函数：
#sidebar {
width: grid-width($n: 5);
}
建议在函数前面添加前缀以避免命名冲突，同时也能够有效区分哪些是自定义的函数，例如为自定义函数添加公司名称作为前缀 -uinika-grid-width 。自定义函数同样也支持可变参数，使用方式与混入Mixin相同。
同样由于历史原因，函数名以及其它SASS标识符当中的连字符 - 和下划线 _ 都是可以互换的，如果定义了一个名为 grid-width 的函数，那么同样可以通过 grid_width 进行调用，反之亦然。
输出类型
虽然SASS默认输出的CSS格式是良好的，但是可以根据开发人员的个人习惯，使用SASS提供的其它4种输出格式。即可以通过 :style 选项进行设定，也可以在命令行中直接使用 --style 标志。
:nested
嵌套nested是SASS默认的输出格式，每个属性都会占据一行，但缩进不是固定的，每个规则都基于其嵌套深度进行缩进。例如：
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
嵌套格式在阅读较大CSS工程文件时能够帮助开发人员快速的了解代码的结构。
:expanded
扩展expanded格式类似于人工手写的CSS样式，每个属性和规则都独占用一行。规则当中的CSS属性会进行缩进，但规则本身并不会进行任何特殊的缩进，例如：
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
:compact
紧凑compact格式比起上述两种格式占据的空间更小，这种格式将重点聚焦在选择器而非CSS属性上。每个CSS规则独自占据一行，该行还包括全部的CSS属性。 每个嵌套的规则都会另起新行，不嵌套的选择器会输出空白行作为分隔 ，例如：
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
:compressed
压缩compressed格式会尽可能减小所生成文件的体积，并在该文件末尾产生一个换行。除了必要的选择器分隔之外，几乎没有多余的空格。这种格式会让颜色等CSS属性值以最简短的方式来进行表示，由于代码可读性极差，因此主要用于生产环境。
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
扩展SASS
对于前端开发人员的特殊需求，SASS为提供了多项高阶定制功能，但是使用这些功能需要非常熟悉 Ruby 。例如自定义SASS函数、缓存存储、自定义导入器等等，这些功能在日常前端开发工作当中并不常用，可以根据需要查阅SASS的源码API文档。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Spring Into HTML and CSS
Molly E. Holzschlag / Addison-Wesley Professional / 2005-5-2 / USD 34.99
The fastest route to true HTML/CSS mastery! Need to build a web site? Or update one? Or just create some effective new web content? Maybe you just need to update your skills, do the job better. Welco......一起来看看 《Spring Into HTML and CSS》 这本书的介绍吧!
