一、安裝、配置

1. 安裝Ruby
   window下安裝SASS首先需要安裝Ruby（https://rubyinstaller.org/downloads/）
   注意：安裝過(guò)程中請(qǐng)注意勾選Add Ruby executables to your PATH添加到系統(tǒng)環(huán)境變量
2. 刪除替換原gem源（sass中文網(wǎng)）

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替換成功
gem sources -l
https://gems.ruby-china.com

3. sass安裝

gem install sass
gem install compass

4. 編譯器配置（idea）
   File->Settings->Tools->File Watchers
   點(diǎn)擊右上角的+號(hào)，選擇compass scss
   program：選擇 Ruby27-x64\bin\scss.bat
   Arguments里面填

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

二、使用（只記錄部分）

1. 使用變量

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

2. 嵌套

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

//編譯后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }

3.父選擇器的標(biāo)識(shí)符&（常用語(yǔ)偽類）

article a {
  color: blue;
  :hover { color: red }
}

//編譯后
article a { color: blue }
article a:hover { color: red }

4.混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//編譯后
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}