安裝ruby
http://rubyinstaller.org/downloads/
淘寶鏡像
更換鏡像：（ 如報(bào)錯(cuò)萍歉，請把https://gems.ruby-china.org換成http://gems.ruby-china.org）
$gem update --system # 這里請翻墻一下$gem -v2.6.3
$gem?sources?--add?https://gems.ruby-china.org/?--remove?https://rubygems.org/
$gem?sources?-l
https://gems.ruby-china.org
#?確保只有?gems.ruby-china.org
步驟：
step1
新建.scss文件，按照sass語法編寫
step2
打開ruby 命令
進(jìn)入所在文件夾
如在F盤栓辜，可直接輸入F: 回車
如f://study/exercise/test.scss
則輸入 cd f:/study/exercise 回車
SASS文件就是普通的文本文件疯兼，里面可以直接使用CSS語法樱报。文件后綴名是.scss，意思為Sassy CSS。
下面的命令柠衅，可以在屏幕上顯示.scss文件轉(zhuǎn)化的css代碼屡谐。（假設(shè)文件名為test述么。）
sass test.scss
如果要將顯示結(jié)果保存成文件，后面再跟一個(gè).css文件名愕掏。
sass test.scss test.css
SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：
* nested：嵌套縮進(jìn)的css代碼度秘，它是默認(rèn)值。
* expanded：沒有縮進(jìn)的亭珍、擴(kuò)展的css代碼敷钾。
* compact：簡潔格式的css代碼枝哄。
* compressed：壓縮后的css代碼。
生產(chǎn)環(huán)境當(dāng)中阻荒，一般使用最后一個(gè)選項(xiàng)挠锥。
sass --style compressed test.sass test.css
你也可以讓SASS監(jiān)聽某個(gè)文件或目錄，一旦源文件有變動(dòng)侨赡，就自動(dòng)生成編譯后的版本蓖租。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
三、基本用法
3.1 變量
SASS允許使用變量羊壹，所有變量以$開頭蓖宦。
$blue : #1875e7;
div {
color : $blue;
}
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中油猫。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 計(jì)算功能
SASS允許在代碼中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 嵌套
SASS允許選擇器嵌套稠茂。比如，下面的CSS代碼：
div h1 {
color : red;
}
可以寫成：
div {
h1 {
color:red;
}
}
屬性也可以嵌套情妖，比如border-color屬性睬关，可以寫成：
p {
border: {
color: red;
}
}
注意，border后面必須加上冒號毡证。
在嵌套的代碼塊內(nèi)电爹，可以使用&引用父元素。比如a:hover偽類料睛，可以寫成：
a {
&:hover { color: #ffb3ff; }
}
3.4 注釋
SASS共有兩種注釋風(fēng)格丐箩。
標(biāo)準(zhǔn)的CSS注釋 /* comment */ ，會保留到編譯后的文件恤煞。
單行注釋 // comment屎勘，只保留在SASS源文件中，編譯后被省略阱州。
在/*后面加一個(gè)感嘆號挑秉，表示這是"重要注釋"。即使是壓縮模式編譯苔货，也會保留這行注釋犀概，通常可以用于聲明版權(quán)信息夜惭。
/*!
重要注釋姻灶！
*/
四、代碼的重用
4.1 繼承
SASS允許一個(gè)選擇器诈茧，繼承另一個(gè)選擇器产喉。比如，現(xiàn)有class1：
.class1 {
border: 1px solid #ddd;
}
class2要繼承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
Mixin有點(diǎn)像C語言的宏（macro）曾沈，是可以重用的代碼塊这嚣。
使用@mixin命令，定義一個(gè)代碼塊塞俱。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令姐帚，調(diào)用這個(gè)mixin。
div {
@include left;
}
mixin的強(qiáng)大之處障涯，在于可以指定參數(shù)和缺省值罐旗。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的時(shí)候，根據(jù)需要加入?yún)?shù)：
div {
@include left(20px);
}
下面是一個(gè)mixin的實(shí)例唯蝶，用來生成瀏覽器前綴九秀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的時(shí)候，可以像下面這樣調(diào)用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 顏色函數(shù)
SASS提供了一些內(nèi)置的顏色函數(shù)粘我，以便生成系列顏色鼓蜒。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令，用來插入外部文件征字。
@import "path/filename.scss";
如果插入的是.css文件友酱，則等同于css的import命令。
@import "foo.css";
五柔纵、高級用法
5.1 條件語句
@if可以用來判斷：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的還有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2 循環(huán)語句
SASS支持for循環(huán)：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循環(huán)：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用與for類似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
5.3 自定義函數(shù)
SASS允許用戶編寫自己的函數(shù)锤躁。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
