sass使用

window环境

下载Ruby（http://rubyinstaller.org/downloads）

下载sass（gem install sass）

更新sass（gem update sass）

卸载sass（gem uninstall sass）

使用命令行编译sass（sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css）

编译全部的sass（sass sass/:css/）

实时更新css（sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css）

例子：（将项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中）
sass --watch sass/bootstrap.scss:css/bootstrap.css

输出方式

1.嵌套输出方式 nested

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested

编译之后的风格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2.嵌套输出方式 expanded

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3.嵌套输出方式 compact

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

4.压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

变量声明：

$变量名：值；在值后边加!default 设置默认值；

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

用以上方法覆盖默认值；