一 什么是sass
sass是一種css開發工具。提供了很多便利的寫法，使得css開發變得簡單 易維護
sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號，所以一般都是用第二種寫法
二 官網
阮一峰博客（sass部分）：
http://www.ruanyifeng.com/blog/2012/06/sass.html
三 ruby安裝
因為sass依賴於ruby環境，所以裝sass之前先確認裝了ruby。先導官網下載個ruby
在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到ruby環境
四 sass安裝
然后直接在命令行中輸入
gem install sass
按回車鍵確認，等待一段時間就會提示你sass安裝成功。最近因為牆的比較厲害，如果你沒有安裝成功，那么請參考下面的淘寶的RubyGems鏡像安裝sass，如果成功則忽略。
如果要安裝beta版本的，可以在命令行中輸入
gem install sass --pre
你還可以從sass的Git repository來安裝，git的命令行為
git clone git://github.com/nex3/sass.git cd sass rake install
升級sass版本的命令行為
gem update sass
查看sass版本的命令行為
sass -v
你也可以運行幫助命令行來查看你需要的命令
sass -h
淘寶RubyGems鏡像安裝
sass
由於國內網絡原因，導致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。這時候我們可以通過
gem sources命令來配置源，先移除默認的
https://rubygems.org源，然后添加淘寶的源
https://ruby.taobao.org/，然后查看下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令
gem install sass了，關於常用gem source命令可參看：
常用的gem source
$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES ***
https://ruby.taobao.org # 請確保只有 ruby.taobao.org $ gem install sass
淘寶鏡像也不好用了
gem sources --remove https://rubygems.org/ gem sources -a http://gems.ruby-china.org/ gem sources -l
五 使用
sass文件就是普通的文本文件 里面可以直接使用css語法。后綴名為
.scss （Sassy css）
下面的命令，可以在屏幕上顯示.scss文件轉化的css代碼。（假設文件名為test。）
sass test.scss
如果要將顯示結果保存成文件，后面再跟一個.css文件名。
sass test.scss test.css
sass 提供4種編譯風格的選項
nested 嵌套縮進的css代碼。是默認值
expanded 沒有縮進 擴展的css代碼
compact 簡潔格式的css代碼
compressed 壓縮后的css代碼
生產環境中，一般使用最后一個選項：
sass --style compressed test.scss test.css
sass官方的在線轉換器：http://www.sassmeister.com/
sass 也可以監聽文件，一旦文件被改動，就自動生成編輯后的版本
sass --watch test.scss:test.css
監聽文件夾：
sass --watch sassFileDirectory:cssFileDirectory
六 基本用法
6.1 變量(在選擇器中聲明的變量會覆蓋全局聲明的變量)
任何可以用作css屬性值的賦值都 可以用作sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;變量聲明后被引用才算生效。
6.1.1 sass所以的變量以$開頭 變量名中的中划線和下划線相互兼容
$blue:#1875e7;
div{color:$blue;}
6.1.2 如果變量需要鑲嵌在字符串之中 就必須寫在#{}之中
$left:left;
.rounded {border-#{$left}-radius:5px;}
6.1.3 默認變量：sass的默認變量僅需要在值后面加上
!default即可。 sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可
6.1.4 多值變量
6.1.4.1 list類型
list數據可通過空格，逗號或小括號分隔多個值，可用
nth($var,$index)取值
$px: 5px 6px 8px 10px;//一維數組
$pxT: 10px 20px , 30px 40px;//二維數組
$trpx:(1px solid #eee ) (16px solid #aaa);//二維數組
.class8 {
font-size: nth($px,3);
}
.class9 {
border: nth($trpx,1);
}
.class10 {
margin: nth($pxT,2);
}
6.1.4.2 map類型
map數據以key和value成對出現，其中value又可以是list。格式為：
$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。
$headings:(h1:2em,h2:1.5em,h3:1em);
.class11 {
font-size: map-get($headings,h2);
}
@each $heade , $size in $headings {
#{$heade} {
font-size: $size;
}
}
6.2 可使用算術
$var:10;
body{margin:(14px/2);top:50px+100px;right:$var*10%;}
6.3 嵌套
6.3.1選擇器嵌套：
div{
color:$blue;
h1 {
color:red;
}
}
6.3.2屬性嵌套：
p {
border:{
color:red;
}
}
}
此時
border后面的冒號必須加
6.3.3&引用父元素
a {
&:hover {color:red;}
}
#content aside { color: red;body.ie & { color: green }}
6.3.4 群組選擇器的嵌套
.container { h1, h2, h3 {margin-bottom: .8em} }
nav, aside { a {color: blue} }
6.4注釋
中文注釋的報錯，亂碼的問題解決：
步驟：1、找到下面這個文件C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass\engine.rb 即自己的安裝目錄路徑
2、找到
require 'sass/supports'這一行，在下面一行添加Encoding.default_external = Encoding.find('utf-8')
標准的CSS注釋 /* comment */ ，會保留到編譯后的文件。
單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。
在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明版權信息。
/*! 重要注釋！ */
七 代碼的重用
7.1繼承
sass可以實現選擇器的繼承
.class1 {
border: 1px solid #ddd;
}
.calss2 {
@extend .class1;
font-size: 20px;
}
結果截圖：
7.2 sass代碼塊的重用
使用@mixin命令 定義一個代碼塊 例如下面的left
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令 調用這個mixin
.class3 {
@include left;
}
@mixin 還可以指定參數和缺省值
@mixin right($value:10px) {
float: right;
margin-right: $value;
}
使用的時候，根據需要加入參數：
.class5 {
@include right()
}
如果不傳參數，就是默認值
.class4 {
@include right(40px)
}
常用於：生產瀏覽器前綴
@mixin rounded ($vert,$horz,$radius:10px) {
border-#{$vert}-#{$horz}-radius:$radius;
-moz-border-#{$vert}-#{$horz}-radius:$radius;
-webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.nav {
@include rounded(top,left)
}
.footer {
@include rounded(top,left,5px)
}
多組值參數mixin
如果一個參數可以有多組值，如box-shadow、transition等，那么參數則需要在變量后加三個點表示，如
$variables...。
@mixin box-shadow ($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow: $shadow;
}
@content: 使@mixin接受一整塊樣式，接受的樣式從@content開始
@mixin max-screen ($res) {
@media only screen and (max-width: $res) {
@content;
}
}
@include max-screen(480px) {
body {color:red;}
}
7.3 顏色函數
lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c
7.4 插入文件
@import 命令可以插入外部文件
scss文件：@import 'path/name.scss'
css文件：@import 'name.css'
8 高級用法
8.1 條件語句
@if 可以用來判斷 配套的還有@else命令
.class6 {
@if 1+1 == 2 {color:red}
@if 5 < 3 {color:blue}@else {
background-color: #FFF
}
}
8.2循環語句
8.2.1 for循環 for循環有兩種形式，分別為：
@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid red;
}
}
8.2.2 while
$i:6;
@while $i > 0 {
.item-#{$i} {width:20px;}
$i:$i - 2;
}
8.2.3 each
@each $member in a,b,c,d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
8.3 自定義函數 @function @return
@function double($n) {
@return $n * 2;
}
.class7 {
width: double(5px);
}
8.4 @at-root 為了跳出選擇器嵌套的。默認所以得嵌套，繼承所有上級選擇器。但有了這個就可以跳出所有上級選擇器。
//單個選擇器跳出
.parent {
color:red;
@at-root .child {
width: 100px;
}
}
//多個選擇器跳出
.parent2 {
color:blue;
@at-root {
.child1 {width: 100px;}
.child2 {width: 200px;}
}
}
8.4.1默認
@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)
//跳出父級元素嵌套
@media print {
.parent2 {
color: red;
@at-root .child3 {
color: blue;
}
}
}
//跳出media嵌套 父級有效
@media print4 {
.parent4 {
color: red;
@at-root (without: media) {
.child4 {
width: 200px;
}
}
}
}
//跳出media和父級
@media print5 {
.parent5 {
color:red;
@at-root (without:all) {
.child5{height: 200px;}
}
}
}
8.4.2 @at-root 於 & 配合使用
.child6 {
@at-root .parent6 & {
height: 300px;
}
}
8.4.3占位選擇器
%
從sass 3.2.0以后就可以定義占位選擇器
%。這種選擇器的優勢在於：如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了
@extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以
%標識定義，通過
@extend調用。
%ir {
color:transparent;
text-shadow:none;
background-color: transparent;
border:0;
}
%clearfix {
@if $ie7 {
*zoom :1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0;
}
&:after {
clear: both;
}
}
#header {
width: 2100px;
@extend %ir;
}
.ir {
@extend %ir;
}
九 編譯
9.1 sublime裝SASS build插件，可以在sublime的packages文件夾下打開終端從github的https://github.com/jaumefontal/SASS-Build-SublimeText2.git上clone。然后編輯.scss直接保存即可編譯
9.2 官方的在線轉換器：http://www.sassmeister.com/
9.3 在項目的scss文件夾下用終端命令
9.4 據說webstorm內置了sass的編譯
9.5 圖形化工具 koala
9.6 gulp