1.1下载地址：
http://rubyinstaller.org/downloads
2.1 安装
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2.2 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
三、基本用法
变量
SASS允许使用变量，所有变量以$开头。
Sass源代码：
$blue:#1875e7; div{ color:$blue; } $side:left; /*asassdf*/ .rounded{ .round{ border-#{$side}-radius:5px; } } /*计算能力*/ $var:2; body{ margin: (14px/2); top:50px + 100px; right:$var * 20%; } /*嵌套*/ div h1{ color:red; } /*也可以写成这样*/ /*属性的嵌套必须要在属性后成加上冒号*/ p{ border:{ color:red; } } /*关于注释： 又斜杠是在css文件中是不显示的； C++方式注释的方法会留在CSS文件中； */ /*继承*/ .class1{ margin:0 auto; border:1px solid #000; } .class2{ @extend .class1; font-size:120%; } /*Mixin 宏的使用*/ @mixin left{ //定义mixin宏 float:left; margin-left:10px; } div{ @include left; //@include 用于引用minxin宏； } /*带参数的minxin宏*/ @mixin left($value:20px){ float:left; margin-right:$value; } //使用带参数的mixin宏； div{ @include left(40px); } /*Sass高级语法*/ //@if 语句的使用； p{ @if 1 + 1 == 2{ border:1px solid #000; } @if 3 < 2{ border:2px solid #fff; } } //@else 语句的使用； /* @function linghtness($value){ @return $value; } $color:20%; @if linghtness($color) > 30%{ background-color:#000; }@else{ background-color:#fff; }*/ //for 语句的使用； @for $i from 1 to 5 { .itme-#{$i} {width:100px; height:100px; } } //while语句 $i:6; @while $i > 0 { .itme-#{$i} {width: 2em * $i;} $i:$i - 2; } //each命令 @each $member in a, b, c, d, f{ .#{$member}{ background-image:url("../images/#{$member}.jpg"); } }
对应生成的CSS文件：
@charset "UTF-8"; div { color: #1875e7; } /*asassdf*/ .rounded .round { border-left-radius: 5px; } /*计算能力*/ body { margin: 7px; top: 150px; right: 40%; } /*嵌套*/ div h1 { color: red; } /*也可以写成这样*/ /*属性的嵌套必须要在属性后成加上冒号*/ p { border-color: red; } /*关于注释： 又斜杠是在css文件中是不显示的； C++方式注释的方法会留在CSS文件中； */ /*继承*/ .class1, .class2 { margin: 0 auto; border: 1px solid #000; } .class2 { font-size: 120%; } /*Mixin 宏的使用*/ div { float: left; margin-left: 10px; } /*带参数的minxin宏*/ div { float: left; margin-right: 40px; } /*Sass高级语法*/ p { border: 1px solid #000; } /* @function linghtness($value){ @return $value; } $color:20%; @if linghtness($color) > 30%{ background-color:#000; }@else{ background-color:#fff; }*/ .itme-1 { width: 100px; height: 100px; } .itme-2 { width: 100px; height: 100px; } .itme-3 { width: 100px; height: 100px; } .itme-4 { width: 100px; height: 100px; } .itme-6 { width: 12em; } .itme-4 { width: 8em; } .itme-2 { width: 4em; } .a { background-image: url("../images/a.jpg"); } .b { background-image: url("../images/b.jpg"); } .c { background-image: url("../images/c.jpg"); } .d { background-image: url("../images/d.jpg"); } .f { background-image: url("../images/f.jpg"); }