一参滴、安裝能扒、配置
- 安裝Ruby
window下安裝SASS首先需要安裝Ruby（https://rubyinstaller.org/downloads/）
注意：安裝過程中請注意勾選Add Ruby executables to your PATH添加到系統(tǒng)環(huán)境變量 - 刪除替換原gem源（sass中文網(wǎng)）
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替換成功
gem sources -l
https://gems.ruby-china.com
- sass安裝
gem install sass
gem install compass
- 編譯器配置（idea）
File->Settings->Tools->File Watchers
點(diǎn)擊右上角的+號颗味，選擇compass scss
program：選擇 Ruby27-x64\bin\scss.bat
Arguments里面填
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
二、使用（只記錄部分）
- 使用變量
$nav-color: #F90;
nav {
width: 100px;
color: $nav-color;
}
- 嵌套
#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)識符&（常用語偽類）
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;
}
