Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。
无论使用哪种方式都需要首先安装 Sass gem :
如果你使用的是 Windows ，你可能首先需要安装 Ruby
如果要在命令行中运行 Sass ,只要使用
sass input.scss output.css
|
你还可以使用 Sass 命令来监视某个 Sass 文件的改动，并自动编译来更新 CSS :
sass --watch input.scss:output.css
|
如果你的目录里有很多 Sass 文件，你也可以使用 Sass 命令来监视整个目录 :
sass --watch app/sass:public/stylesheets
|
Sass 提供四个编译风格的选项:
- nested：嵌套缩进的 css 代码，它是默认值。
- expanded：没有缩进的、扩展的 css 代码。
- compact：简洁格式的 css 代码。
- compressed：压缩后的 css 代码。
生产环境当中，一般使用最后一个选项:
sass --style compressed test.sass test.css
|
使用 sass –help 可以列出完整的帮助文档
SASS 允许使用变量，所有变量以 $ 开头
$blue: #1875e7;
div {
color: $blue;
}
|
如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中
$side: left;
.rounded {
border-#{$side}-radius: 5px;
}
|
SASS 允许在代码中使用算式
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
|
SASS 允许选择器嵌套。比如，下面的 CSS 代码：
可以写成：
div {
hi {
color: red;
}
}
|
属性也可以嵌套，比如 border-color 属性，可以写成：
p {
border: {
color: red;
}
}
|
注意，border 后面必须加上冒号。
在嵌套的代码块内，可以使用 & 引用父元素。比如 a:hover 伪类，可以写成：
a {
&:hover {
color: #ffb3ff;
}
}
|
SASS 共有两种注释风格
- 标准的 CSS 注释 /_ comment _/ ，会保留到编译后的文件。
- 单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。
- 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
SASS 允许一个选择器，继承另一个选择器。比如，现有 class1：
.class1 {
border: 1px solid #ddd;
}
|
class2 要继承 class1，就要使用 @extend 命令：
.class2 {
@extend .class1;
font-size: 120%;
}
|
Mixin 有点像 C 语言的宏（macro），是可以重用的代码块。
使用@mixin 命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
|
使用 @include 命令，调用这个 mixin。
mixin 的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
|
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
|
下面是一个 mixin 的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
|
使用的时候，可以像下面这样调用：
#navbar li {
@include rounded(top, left);
}
#footer {
@include rounded(top, left, 5px);
}
|
SASS 提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
|
@import 命令，用来插入外部文件。
@import "path/filename.scss";
|
如果插入的是 .css 文件，则等同于 css 的 import 命令。
@if 可以用来判断：
p {
@if 1 + 1 == 2 {
border: 1px solid;
}
@if 5 < 3 {
border: 2px dotted;
}
}
|
配套的还有 @else 命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
|
SASS 支持 for 循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
|
也支持 while 循环：
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
|
each 命令，作用与 for 类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
|
SASS 允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
|