随笔记录36 sass安装及使用

一、安装、配置

1. 安装Ruby
   window下安装SASS首先需要安装Ruby（https://rubyinstaller.org/downloads/）
   注意：安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量
2. 删除替换原gem源（sass中文网）

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
   点击右上角的+号，选择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.父选择器的标识符&（常用语伪类）

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;
}