一、安装、配置
- 安装Ruby
window下安装SASS首先需要安装Ruby（https://rubyinstaller.org/downloads/）
注意：安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量 - 删除替换原gem源（sass中文网）
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
点击右上角的+号，选择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.父选择器的标识符&（常用语伪类）
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;
}
