1st 介绍及安装使用：
Sass（Syntactically Awesome StyleSheets）
Sass与Less一样，也是CSS预处理器，有着变量（variables），嵌套（Nested rules），混合（mixins）等功能。使用如Compass的样式库有助于更好的组织管理文件，以及高效开发项目！
语法格式：
有两种写法：1.SCSS（sassy css），这种只是在css语法基础上进行扩展，以.scss格式结尾；2.缩进格式（indented sass），通常称作“sass”。使用的是ruby语法，缩进代替花括号，换行代替分号。这种格式以.sass结尾。（ruby，日本人发明的，前些年与python其名，世界上很多网站是用ruby写的，如早期的Twitter。但是国内环境不是很好，原先我也没怎么接触过这么语言。）
推荐SCSS写法！与css无痕过渡！
使用Sass：
三种方法使用Sass：作为命令行工具；作为独立的Ruby模块（module）；作为Rack-enabled框架的插件（如ruby on rails与Merb）。但是无论哪种方式都需要先安装Sass gem！
windows系统需要先安装ruby,点击链接跳转。苹果默认已经安装了，Windows系统-----╮(╯▽╰)╭
安装命令：gem install sass
命令行语法可通过sass --help进行查看！
运行sass编译文件：
sass test.scss test.css
监视单个sass文件，每次修改保存时自动编译！
sass --watch test.scss:test.css
监视整个文件夹：
sass --watch app/scss:public/stylesheets
2nd 快速入门
2.1 变量（variable）：使用$符号标识（老版本用!标识）
示例example.scss：
$testColor:gold;
.test1{
color:$testColor;
$width:100px;
width: $width;
}
sass example.scss example.css编译后：
.test1 {
color: gold;
width: 100px; }
/*# sourceMappingURL=example.css.map */
注意：1.$testColor变量定义在规则块之外，$width定义在规则块内部，只能在规则块内部应用！ 2.变量定义要在变量使用之前（即$width:100px;在width:$width;前面；否则报错，这与less不同）
2.2 嵌套规则（Nested Rules）
当我们编写如下css时：
.test1 p {
border: 1px solid goldenrod; }
.test1 .test2 p {
color: blue; }
.test1 .test2 .test3 h1 {
background-color: gold; }
结构就显的不是特别清晰了！
采用sass的嵌套规则，我们可以写成：
.test1{
p{
border: 1px solid goldenrod;
}
.test2{
p{
color: blue;
}
.test3{
h1{
background-color: gold;
}
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。