Sass快速入门笔记（将主要知识点截取出来，参考官方文档和一些网络教学视频）

官方网站：https://www.sass.hk/docs/

一、安装Sass(全部参考Sass官方文档)

1、windows需先安装RuBy，Mac系统自带RuBy无需安装

https://rubyinstaller.org/downloads/

傻瓜式的安装完成后，需要测试安装有没有成功,运行CMD输入以下命令：

ruby -v
//如果安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

查看gem版本

gem -v
3.0.3

删除替换gem源（外网经常断，我们换一下内网）

//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

2、Sass安装

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass //暂时用不到，先不用安装Compass

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下是sass常用更新、查看版本、sass命令帮助等命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

二、编译css文件

1、单个文件编译（命令行）

//编译格式
sass 你的Scss文件.scss:你想要编译的css.css 

将sassFolder文件夹下的sassTest.scss文件编译到css文件夹下的style.css文件

2、使用watch监听编译单个文件

当我们scss文件修改后，使用上面的命令是没办法同步更新的，修改完成后，我们依然需要再次手动编译，而使用watch可以自动帮我们监听文件，自动编译

注意此种方式，会让你的控制台进入到运行监听模式，你需要按ctrl+c键停止批处理操作，才能停止监听，当然，此时监听也会停止

//单文件监听命令,input.scss表示你要编译的scss文件，output.css表示你编译完成的css文件
sass --watch input.scss:output.css

使用watch监听将sassFolder文件夹下的sassTest.scss文件编译到css文件夹下的style.css文件

3、使用watch监听编译整个sass文件夹（推荐）

每次监听一个也不方便，那么有什么办法可以监听多个文件夹呢，我们可以监听整个文件夹

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch scss文件夹/css文件夹（编译后文件夹）

监听编译sassFolder文件夹

三、指定输出css格式

1、4中编译格式

有没有可以控制scss文件编译时输出的css文件格式的功能呢？有

4中格式
nested：嵌套
compact：紧凑
expanded：扩展
compressed：压缩

//用[]括起来的表示可选项--watch表示监听
//--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
//输出格式为上面4中的一种
sass [--watch] input.scss:output.css --style 输出格式[--sourcemap]

nested：嵌套

compact：紧凑

expanded：扩展

compressed：压缩

2、注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释//，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

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

将! 作为多行注释的第一个字符表示在压缩(compressed)输出模式下(就是我们上面介绍的4中格式中的一个)保留这条注释并输出到CSS 文件中，通常用于添加版权信息。插值语句 (interpolation) 也可写进多行注释中输出变量值：

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

//编译为
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

四、sass变量

1、.sass与scss区别

sass后缀文件是早期文件格式，因为Sass使用RuBy语言写的，所以语法比较类似RuBy。现在更流行scss文件为后缀的文件，因为它的语法更贴近css

2、Sass变量声明使用

sass声明变量与css声明属性类似，sass在以前使用！作为声明标识，现在使用$,因为$在CSS中好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突

$highlight-color: #F90 ; //变量$highlight-color现在的值是#F90
$basic-border: 1px solid black;//变量$basic-border现在的值是 1px solid black
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue";//现在变量plain-font的值有"Myriad Pro"、Myriad和"Helvetica Neue"三个值，类似数组，我们需要通过引用来使用某个值

3、Sass变量的作用域

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

/**
在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。
$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。
这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。
也就是说，如果你学过编程语言那么，这里的$nav-color是全局变量
$width就是局部变量
*/

4、Sass变量的引用

变量之间的相互引用

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;//这时你可以认为$highlight-border变量值为1px solid #F90;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}
/**
这里，$highlight-border变量的声明中使用了$highlight-color这个变量。
产生的效果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。
*/

5、变量名命名规则

不同单词之间可以通过_或者-来分隔，但是它俩并不会被区分，就像VB语言中不区分大小写，而Java中区分大小写一样，Sass中不区分_和-

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}
//$link-color和$link_color指向同一个对象

五、嵌套规则

1、嵌套Css规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

sass可以让你只写一遍，且使样式可读性更高,sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

可以像普通的CSS那样包含属性，又可以嵌套其他规则块

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

//编译后
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

上面是一些基本嵌套，但涉及到其它操作，就不能这么写了，比如里面写一个:hover伪类,sass提供了一个特殊结构&

2、 父选择器的标识符&

&表示引用父选择器

article a {
  color: blue;
  :hover { color: red }
}
//编译会出错，因为编译结果为
article a{color:blue}
article a :hover{color:red}//注意a后面有空格
//当然，会直接报错，而不给你返回这个结果，为什么错？正确的写法应该是
article a:hover{color:red} //对a后面是没有空格的，这才是正确的形式

/**
Sass编译会依次遍历选择器，然后用空格拼接，这在使用伪类的时候肯定是不对的
*/

article a {
  color: blue;
  &:hover { color: red }
  & &-text{font-size:25px}//只要使用了&符号，就表示父选择器
}
//编译后
article a{color:blue}
article a:hover{color:red}
article article-text{font-size:25px}//只要使用了&符号，就表示父选择器
//所以，&代指父选择器

同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

#content aside {
  color: red;
  body.ie & { color: green }
}

//编译后
#content aside {color: red};
body.ie #content aside { color: green }

3、属性嵌套

有些 CSS属性遵循相同的命名空间 (namespace)，比如font-family, font-size, font-weight 都以 font作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

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

//编译为
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

六、@mixin定义混合样式指令@include使用混合样式指令

1、基础使用（和定义变量然后使用相同）

简单来说就是使用@mixin定义一个样式，此样式可以包含你想要的样式内容，也就是多种样式属性的一个混合，比如加边框，然后加阴影，再加个背景色.然后使用@include在其它样式中，引入定义好的样式
如果你学过编程，这就和定义一个方法一样，为了不重复写一些代码，而将这些代码单独写成一个方法，在需要的地方调用即可

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

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

混合也可以包含选择器和属性，甚至可以用 & 引用父选择器：

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

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

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

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

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

//编译为
a {
  color: blue;
  background-color: red; }

混合样式中也可以包含其他混合样式，比如

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

2、参数（和定义一个方法一样，调用时可以传入形参）

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@mixin sexy-border($color, $width) {//看到括号里定义了两个变量
  border: {
    color: $color;//这里使用了名为$color的变量
    width: $width;//这里使用$width
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }//我们使用的时候，只需要传入我们想要的值就可以了，比如这里传入蓝色和1in的宽度

//编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

使用给变量赋值的方法给参数设定默认值，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：

@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 { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }//这种写法和上面两句效果一样，但是这是指定关键词赋值，就脱离位置的限制了

//编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

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

3、参数变量（类似java的不定长参数）

有时，不确定混合指令需要使用多少个参数，比如一个关于box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量…声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

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

//编译为

.shadowed {
  -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;
}

七、继承@extends

当我们要写一个样式，此样式和你已经写好的样式完全相同，仅仅比它多了一点点的新样式，此时你也只能重写这些样式，或者通过混合样式来搞定，但混合样式并不适用于所有场合，此时继承这个样式是最好的选择

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;//继承指定选择器所有的样式内容
  border-width: 3px;
}

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

.seriousError {//此时这个选择器就具有了.error和独属于自己的样式
  border-width: 3px; }

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

八、@import 引入外部scss或sass文件，已经分音

1、@import引入外部文件

一般情况下文件的拓展名是.scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

@import "foo.scss";
或
@import "foo";
都会导入foo文件，但只限于扩展名为scss或sass的文件

@import "rounded-corners", "text-shadow";//运行同时导入多个文件，用,分隔

以下情况不会导入scss或sass文件

@import "foo.css";				//文件拓展名是.css
@import "foo" screen;			
@import "http://foo.com/bar";	//文件名以 http:// 开头
@import url(foo);				//文件名是 url()

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

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入Sass 文件，只能作用于 CSS 的 url() 导入方式：

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

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

@import的嵌套

//假设 example.scss 文件包含以下样式：
.example {
  color: red;
}

//然后导入到 #main 样式内
#main {
  @import "example";
}

//将会被编译为
#main .example {
  color: red;
}

2、分音

如果需要导入SCSS或者 Sass文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
不要被误导，不是导入的时候不编译，而是用_开头的scss或sass文件，都不会被编译成css文件

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
@import "colors";//引入的时候不需要添加_
上面的例子，导入的其实是 _colors.scss 文件,但不会将这个文件编译

九、SassScripts（Sass脚本）

1、Interactive Shell

Interactive Shell可以在命令行中测试SassScript的功能。在命令行中输入sass -i，然后输入想要测试的SassScript查看输出结果：

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

2、变量(前面已经介绍过Sass变量了)

SassScript 最普遍的用法就是变量，变量以$开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;
直接使用即调用变量：
#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

#main {
  $width: 5em !global;//如果不加！global，就是局部变量，只能在{}中有效
  width: $width;
}

#sidebar {
  width: $width;//但是现在这里可以使用此变量，因为!global可以将局部变量转换为全局
}
//编译为
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

3、数据类型以及运算

SassScript 支持 6 种主要的数据类型

数值型
1, 2, 13, 10px
SassScript 支持数字的加减乘除、取整等运算(+, -, *, /, %),如果必要会在不同单位间转换值。
关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, !=可用于所有数据类型。
除法运算/需要特别说明

p {
  width: 1in + 8pt;
}

//编译为
p {
  width: 1.111in; }

//除法运算

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。
也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：
1）如果值，或值的一部分，是变量或者函数的返回值
2）如果值被圆括号包裹
3）如果值是算数表达式的一部分
p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为
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; }

字符串
有引号字符串与无引号字符串，"foo", 'bar', baz
SassScript 支持 CSS 的两种字符串类型：有引号字符串 (quoted strings)，如"Lucida Grande" 'http://sass-lang.com'；与无引号字符串 (unquoted strings)，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{}(interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

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

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

一、
	+ 可用于连接字符串
	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!"; }

颜色
blue, #04a3f9, rgba(255,0,0,0.5)

一、
	颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
	p {
	  color: #010203 + #040506;
	}
	
	计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
	p {
	  color: #050709; }	
二、  
	使用 color functions 比计算颜色值更方便一些。
	数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如
	p {
	  color: #010203 * 2;
	}
	
	计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
	p {
	  color: #020406; }
三、 
	需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
	p {
	  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
	}
	
	编译为
p {
  color: rgba(255, 255, 0, 0.75); }

四、
	颜色值的 alpha channel 可以通过 opacify 或 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.8);
	  background-color: rgba(255, 0, 0, 0.25); }
五、
	IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
	$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);
	}

布尔型
true, false
SassScript 支持布尔型的 and or 以及 not 运算。

空值
null

数组 (list)
用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
数组不支持任何运算方式，只能使用 list functions控制。

获取列表内容
nth(5px 10px,1)//取列表中第1个值
5px
index(5px 10px,5px)//获取列表中5px的位置
1
append(5px 10px,15px)//向列表中插入一个新值
(5px 10px 15px)
join(5px 10px , 15px 20px)//将多个列表连接
(5px 10px 15px 20px)

maps
相当于 JavaScript 的 object，(key1: value1, key2: value2)

$colors:(light:#ffffff,dark:#000000)
map-get($colors,light)//获取指定map中指定键（key）的值
#ffffff
map-get($colors,dark)
#000000
map-keys($colors)//获取指定map集合中所有key
("light","dark")
map-values($colors)//获取指定map集合所有value
(#ffffff,#000000)
map-has-key($colors,light)//判断指定map集合中是否有light这个key
true
map-merge(map1,map2)//将两个map集合合并为一个
map-remove(map,key1[,key2,...])//移除指定集合中的键值对，多个键用,分隔

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串

一、圆括号 (Parentheses)
	圆括号可以用来影响运算的顺序：
	p {
	  width: 1em + (2em * 3);
	}
	
	编译为
	p {
	  width: 7em; }
	  
二、函数 (Functions)
	SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：
	p {
	  color: hsl(0, 100%, 50%);
	}
	
	编译为
	p {
	  color: #ff0000; }
	  
三、关键词参数 (Keyword Arguments)
Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

四、插值语句 #{} (Interpolation: #{})
	通过 #{} 插值语句可以在选择器或属性名中使用变量：
	$name: foo;
	$attr: border;
	p.#{$name} {
	  #{$attr}-color: blue;
	}
	
	编译为
	p.foo {
	  border-color: blue; }
	  
	#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
	p {
	  $font-size: 12px;
	  $line-height: 30px;
	  font: #{$font-size}/#{$line-height};
	}
	
	编译为
	p {
	  font: 12px/30px; }

七、变量定义 !default (Variable Defaults: !default)
	可以在变量的结尾添加 !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"; }

4、控制指令

@if

一、当 `@if` 的表达式返回值不是 `false` 或者 `null` 时，条件成立，输出 {} 内的代码：
	p {
	  @if 1 + 1 == 2 { border: 1px solid; }
	  @if 5 < 3 { border: 2px dotted; }
	  @if null  { border: 3px double; }
	}
	
	编译为
	p {
	  border: 1px solid; }
二、@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如： $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

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。
另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

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

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each 将变量 $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

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

$i: 6;//定义一个变量i值为6
@while $i > 0 {//当$i的值为0的时候，退出循环
  .item-#{$i} { width: 2em * $i; }//设置每一项.item-#{插值}的样式
  $i: $i - 2;//让i的值-2
}
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }