Sass总结之一

1、Sass安装
（1）到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。
（2）Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，选择Add executables to your PATH（不选中，就会出现编译时找不到Ruby环境的情况）
（3）Cmd打开命令行输入以下命令
①gem sources --remove https://rubygems.org/
②gem sources -a https://gems.ruby-china.com
③gem sources -l
④gem install sass
⑤sass -v
⑥gem list

2、Compass安装
（1）Cmd打开命令行输入以下命令
①gem install compass
②compass-v

3、Sass命令行
（1）compass create text （创建一个sass文件）
（2）cd text （切换到文件所在位置）
（3）compass watch （监听scss的变化，动态改变css的样式）
（4）Ctrl + C （停止监听）
（5）compass compile （在修改了输出方式后直接编译）
4、Sass语法
（1）@import
①@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 两个文件。

⑤如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。
例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你还可以这样做：
@import “colors”;//不用加下划线
来引入 _colors.scss 文件。

⑥注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。
例如， _colors.scss 不能与 colors.scss 并存。
（2）@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@mixin col-6{
width:50%;
float: left;
}
（3）@include 指令可以将混入（mixin）引入到文档中。
.webdemo-sec{
@include col-sm(50%);
}
（4）@extend选择器样式的继承
①extend继承多个选择器

②连续继承

③extend不可以继承选择器序列

④使用%，用来构建只用来继承的选择器
（%声明的代码，如果不被 @extend 调用的话，不会产生任何代码。）

（5）@media 指令
①可以嵌套在 CSS 规则中
②如果在样式中使用 @media 指令，它将冒泡到外面。
③在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，使用方式（$width:50%）
④unitless(判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false)

（6）@debug 在 Sass 中是用来调试的,@error 和 @warn、@debug 功能是如出一辙。

（7）@if 指令
①如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

（8）@for 指令:@for 循环中有两种方式：

①@for $i from <start> through <end>

②@for $i from <start> to <end>

$i 表示变量
start 表示起始值
end 表示结束值
through 表示包括 end 这个数，而 to 则不包括 end 这个数。
如下代码，先来个使用 through 关键字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
再来个 to 关键字的例子：
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
（9）@while指令：和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。
这里有一个 @while 指令的简单用例：
//SCSS
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
编译出来的 CSS
.while-4 {
width: 24px;
}
.while-3 {
width: 23px;
}
.while-2 {
width: 22px;
}
.while-1 {
width: 21px;
}
（10）@each 指令:@each 循环就是去遍历一个列表，然后从列表中取出对应的值。
①@each 循环指令的形式：@each $var in
②$var 就是一个变量名， 是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。
这有一个 @each 指令的简单示例：
$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}
编译出 CSS:
.author-bio .photo-adam {
background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png") no-repeat; }
（11）@at-root 指令:从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。


5、Sass四种输出方式
（1）expanded

（2）nested

（3）compact

（4）compressed