SASS用法指南(转)
学过CSS的人都知道，它不是一种编程语言。
你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
各种"CSS预处理器"之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。
============================================
SASS用法指南
作者：阮一峰
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。
二、安装和使用
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的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
三、基本用法
3.1 变量
SASS允许使用变量，所有变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 计算功能
SASS允许在代码中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 嵌套
SASS允许选择器嵌套。比如，下面的CSS代码：
div h1 {
color : red;
}
可以写成：
div {
hi {
color:red;
}
}
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用$引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
四、代码的重用
4.1 继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin。
div {
@include left;
}
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); }
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
} @else {
background-color: #fff;
}
5.2 循环语句
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");
}
}
5.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}#sidebar {
width: double(5px);
}
（完）
文档信息
档案
购买文集
twitter
weibo
广告（购买广告位）
kk 说：
不懂ruby 和less比如何
2012年6月19日 15:54 | 档案 | 引用
依树 说：
sass 和 less 都很好
但有没有什么好的编辑器配合啊？
好像用dreamweaver 来写的话，代码提示功能就没了，稍有不便。
以致我还一直没怎么尝试过这种方式
2012年6月19日 18:39 | 档案 | 引用
Yong 说：
强大的东西果然都很复杂...
2012年6月19日 19:31 | 档案 | 引用
爱早起 说：
我也想学CSS+DIV，一直懒惰！！！
2012年6月19日 20:52 | 档案 | 引用
Zz 说：
我看twitter的bootstrap的时候有个less也是和这个差不多的，这些没准也会成为前端工程师的必备知识了，看来要抓紧时间学习一下。
2012年6月19日 20:58 | 档案 | 引用
大春饵 说：
你好啊，我一直在使用less，我觉得您上面写的sass的功能less几乎全有，那么为什么您最后选择了sass呢？
2012年6月19日 21:46 | 档案 | 引用
Lewis 说：
我觉的好的页面制作，他们面对的和要解决的问题都不是 sass 这种工具可以解决的，所以它的应用范围有限，有点程序员的一厢情愿，却不能满足实际快速开发和维护页面制作的需求，一句话，“它解决的问题不在点儿上”。
2012年6月19日 21:46 | 档案 | 引用
RedNax 说：
LESS还是差了不少的，没有@extend，没有属性嵌套，没有@if和@for，我用下来还有不少bug（比如从javascript拿到的数据无法参与计算什么的）。
唯一的特点就是可以在网页上运行时解析，这感觉相当酷（但要说有啥好处其实也没多少）。
不过用这种实现CSS比直接写CSS畅快多了，尤其是单页面应用型网页。
2012年6月20日 00:35 | 档案 | 引用
雪哥 说：
不太看好SASS,有点鸡肋的感觉。
2012年6月20日 01:03 | 档案 | 引用
charry 说：
谢谢以前好还没注意,有这样好的工具！
2012年6月20日 10:42 | 档案 | 引用
ep 说：
gem install sass
命令行提示HTTP RESPONSE 302错误，网上查找资料提示更新gem，经尝试无效，何解？
win7 x86
2012年6月20日 12:26 | 档案 | 引用
bingo 说：
博主，您的网友捐助试验到现在已经一年了，可以公布数据让大家了解一下状况吗？
2012年6月20日 13:52 | 档案 | 引用
yuhai 说：
SASS适合程序员，设计师可能更习惯于CSS
2012年6月20日 14:58 | 档案 | 引用
阮一峰 说：
不好意思，请再等一下。
有报纸买走了这篇文章，我要等到他们发表以后，才能贴上来，大概在6月底吧。
2012年6月20日 15:00 | 档案 | 引用
阮一峰 说：
Less要靠javascript解析，我不喜欢这种做法。另外，less的变量用@表示，我也不太习惯。
2012年6月20日 15:02 | 档案 | 引用
articlesea 说：
一直用960 Grid System这种框架。
楼主怎么用ruby下的呢，有没有VS或QT下的推荐？
2012年6月20日 15:12 | 档案 | 引用
Maplews 说：
挺累人的.. 我觉着用ruby还不如用javascript
2012年6月20日 18:28 | 档案 | 引用
herbert d 说：
没学过CSS的路过。
2012年6月21日 09:17 | 档案 | 引用
easoncxz 说：
不错。前阵子看貌似还是要收费的；今天一看竟然上github了。可以开始用了。
2012年6月21日 14:45 | 档案 | 引用
三桂 说：
2012年6月22日 00:17 | 档案 | 引用
三桂 说：
less同样也有ruby的gem,可以在本地进行preprocessor...
2012年6月22日 00:21 | 档案 | 引用
red 说：
不要保存为.less文件，直接保存成.css，这样提示功能还是有的。
像这样：
<link rel="stylesheet/less" type="text/css" href="less.css">
2012年6月22日 18:45 | 档案 | 引用
shenfeng 说：
Emacs倒是可以胜任。我试着用了一段时间，还愉快
2012年6月27日 07:56 | 档案 | 引用
linus 脱袜子 说：
ERROR: Could not find a valid gem 'sass' (>= 0) in any repository
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ETIMEDOUT: A connection attempt failed because the connected party di
d not properly respond after a period of time, or established connection failed
because connected host has failed to respond. - connect(2) (http://rubygems.org/
latest_specs.4.8.gz)
why?
2012年6月27日 23:08 | 档案 | 引用
XX 说：
这类工具毫无意义。能节省时间能更方便快捷？没有！
2012年6月29日 02:33 | 档案 | 引用
zk546113096 说：
貌似我还停留在纯的css上，这种还没试过，不过对于我懂点后台语言的来说，还好理解，如果那种只会html,css的是不很难理解这些了？
2012年6月29日 16:23 | 档案 | 引用
kitty 说：
sass貌似把css变复杂了，支持您的博客，
2012年7月31日 17:48 | 档案 | 引用
学徒 说：
请教阮一峰老师：
您是用什么编辑器来编辑SASS的。
我用的是Sublime，安装了SASS的package，可是还是不行。
谢谢！
2012年8月 3日 14:01 | 档案 | 引用
小谈博客 说：
用了几年div+Css，竟然都没听说过还有这个神奇的工具，看来要好好了解了解！！
2012年9月23日 23:32 | 档案 | 引用
hit9 说：
好复杂..我其实只是想扒下octopress 的高亮代码的css而已..
2012年10月16日 18:04 | 档案 | 引用
WebExpressor 说：
用sublime text编辑器，可以安装sass开发包，就可以用提示功能了，我现在就用这个开发，很方便的
2012年11月29日 20:28 | 档案 | 引用
4gouzi 说：
博主的代码中的缩进的空格都被转换成中文的空格了，所以直接复制过去在sass下会报错。
2012年12月10日 14:09 | 档案 | 引用
惠库 说：
很感谢你呀, 正在考虑使用LESS, 还是SASS, 只是不想装RUBY...呵呵
2012年12月25日 13:00 | 档案 | 引用
linus脱袜子 说：
全部试了一遍，发现@import和自带的颜色函数这两处有问题。按照博主的说法使用sass不能编译成功。
@import “path/xxx” //xxx 可以是xxx.scss 或者xxx.sass
这里用的是双引号而不是圆括号
而且 xxx文件的文件名必须为 _xxx.scss 或者 _xxx.sass
SASS官方文档说这叫 partial
@import
Stylesheets can get pretty big. CSS has an @import directive that allows you to break your styles up into multiple stylesheets, but each stylesheet takes a separate (slow) HTTP request. That’s why Sass’s @import directive pulls in the stylesheets directly. Not only that, but any variables or mixins defined in @imported files are available to the files that import them.
Sass has a naming convention for files that are meant to be imported (called “partials”): they begin with an underscore. Let’s create a partial called _rounded.scss to hold our rounded mixin.
In order to support both .scss and .sass files, Sass allows files to be imported without specifying a file extension. That means we can just import "rounded", rather than "rounded.scss".
嗯，关于颜色函数，是在sass的交互shell下使用
在命令行下先敲入 sass -i
这时会有 >> 提示
在敲入 lighten(#cc3, 10%)
会得出 #d6d65c
2012年12月26日 22:38 | 档案 | 引用
阮一峰 说：
@linus脱袜子：
谢谢指出。import后面不能跟圆括号，已经改过来了。但是，文件名好像不用以下划线开头，下面的代码可以编译通过。
@import "./test.scss"
另外，颜色函数没有问题啊，我可以正常使用。
2012年12月27日 01:38 | 档案 | 引用
苹果熊 说：
感觉有点鸡肋，现在css很熟悉了，用记事本也能写出一个网页~
2012年12月31日 16:09 | 档案 | 引用
wangtuda 说：
sass本身很好，看用的人用在何处，怎么用了~
2013年1月22日 10:27 | 档案 | 引用
pigyaa 说：
正在试用Sass,还不敢妄下评论。第一感觉就是把简单的CSS变复杂了
2013年1月31日 11:17 | 档案 | 引用
轻扬 说：
还是喜欢手写css的说。。。。。
2013年2月 3日 01:32 | 档案 | 引用
lorrylockie 说：
webstorm
2013年2月19日 13:19 | 档案 | 引用
wencheng 说：
3.3 嵌套最后
在嵌套的代码块内，可以使用$引用父元素。比如a:hover伪类，可以写成：
应该是 & 代码中的正确
2013年2月25日 17:42 | 档案 | 引用
gigi 说：
你好，很感谢您的介绍，只是使用后遇到问题，.scss的文件里面有中文注释的时候它会提示Syntax error: Invalid GBK character "\xE5"这样的错误，在网上搜索了一下还是没能解决，您知道有啥解决办法吗？
2013年3月21日 13:46 | 档案 | 引用
小天 说：
其实less是可以node.js来编译生成css,再放到服务器那边呢。还有，如果 会用gvim的话，那有个脚本，可以实现语法高亮，保存时自动生成css。原来直接写css的好处全有了。还有less人性化的书写方式。less也有工具，可以将再有css代码转换为less（http://css2less.cc）。我想，如果是设计师的话，更喜欢用less.
2013年4月 6日 01:32 | 档案 | 引用
hit9 说：
只是个预处理器嘛。看了下语法，感觉less, scss都不如sass简洁。看来是python写惯了，喜欢缩进了。。
2013年4月 8日 16:53 | 档案 | 引用
QETHAN 说：
less的语法更轻便，喜欢less. Sass的语法太编程化了，虽然没压力，但是不给力。没有解放思维
2013年4月28日 15:46 | 档案 | 引用
小徐 说：
不以下划线开头的文件也不会被编译啊
这是为什么呢？
我建立了3个文件colors.scss _widths.scss和test.scss
在test.scss中@import 前两个文件
然后命令行编译test.scss时 sass test.scss test.css
不会产生 color.css
这是为什么呢？请教
2013年4月30日 14:06 | 档案 | 引用
chengyu.tao 说：
2013年6月10日 15:54 | 档案 | 引用
shawn 说：
同问
2013年7月11日 18:04 | 档案 | 引用
eastnx 说：
在文件的开头声明编码 @charset "utf-8";
2013年7月21日 12:44 | 档案 | 引用
Havanna 说：
其实可以用compass工具的，而不必要一长串的命令
http://ihavanna.org/internet/2013-08/convert-scss-to-css.html
2013年8月12日 15:45 | 档案 | 引用
peter.zheng 说：
@charset "utf-8";
在有中文顶部的地方都声明一下。注意要放在第一行。
2013年8月23日 13:41 | 档案 | 引用
nan 说：
刚开始看 LESS 和 SASS 感觉是 LESS 语法更简单一些但运算功能好像弱一些，打算暂时先用 LESS 逐渐熟悉后再试试 SASS 吧……
2013年8月28日 19:10 | 档案 | 引用
nan 说：
工具我在用 LiveReload 和 CodeKit 其实都挺方便，不需要 js 去做 LESS 编译的。
2013年8月28日 19:11 | 档案 | 引用
Ju2ender 说：
3.3 嵌套，第四个 code block 上的说明，应是：
“在嵌套的代码块内，可以使用 & 引用父元素。比如a:hover伪类，可以写成：”
原文将 & 写成了 $
2013年9月 2日 19:24 | 档案 | 引用
singlexyz 说：
3.3的一个是h1,一个是hi
2013年10月19日 18:37 | 档案 | 引用
诸葛小觉 说：
用sublimetext吧~
2013年11月 1日 17:16 | 档案 | 引用
hooboy 说：
在linux或者Mac下就不会有问题 比如用codekit和grunt就不会有问题
2013年11月30日 12:03 | 档案 | 引用
hooboy 说：
或者给每个sass文件加上@charset "utf-8"; 只是在Mac或者Linux上写代码会比较酷~！
2013年11月30日 12:18 | 档案 | 引用
materliu 说：
官方是这样说的：
Compass doesn't expose all of its options through the CLI, which this task makes use of. If you need an option not mentioned below you can either specify a path to a config.rb file in the config option or embed it directly into the raw option. Options defined in your Gruntfile will override those specified in your config.rb or raw property. config and raw are mutually exclusive.
所以这个问题很好解决。
compass: {
options: {
config: './config.rb',
}
}
在config.rb compass的配置文件中加一句：
# set the css file encoding
Encoding.default_external = "utf-8"
即可
2013年12月17日 16:29 | 档案 | 引用
可可 说：
sass --watch app/sass:public/stylesheets 这句我怎么写怎么把错，您能给我解释下这个路径
2014年1月 6日 11:44 | 档案 | 引用
可可 说：
大家可以装一个idea编辑器很强大的代码编辑工具
2014年1月 6日 18:00 | 档案 | 引用
行者 说：
照着练习了，感谢。
2014年3月 4日 15:25 | 档案 | 引用
roc 说：
div {
hi {
color:red;
}
}
此处代码有误
应为
div {
h1 {
color:red;
}
}
2014年5月 4日 09:50 | 档案 | 引用
六度 说：
弱弱的问一下，在页面里引用的还是.css文件吧，那在浏览器里调试的话怎么找到SASS文件
2014年5月 8日 10:54 | 档案 | 引用
Justin 说：
很明显 SASS 比 LESS 更强大，SASS 拥有条件语句，循环语句还可以自定义函数
2014年6月10日 14:19 | 档案 | 引用
Jerry 说：
这SASS看起来，还是非常CSS化呀，呵呵。
2014年6月11日 12:30 | 档案 | 引用
mamaloveu 说：
请问楼主：我本地安装好了， 然后在cmd 下面 运行了，确实可以转化成正常的css。
但是scss怎么在实际项目中使用呢？难道是自己把scss写好，然后运行好的css再放到网站上去？
还是在网站打开执行过程中生成呢？谢谢！
2014年6月26日 15:55 | 档案 | 引用
Nightost 说：
峰哥：
建议开头加上这一段
sass 有两种语法
sass有两种后缀名文件：
一种后缀名为sass，不使用大括号和分号；
另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。
在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
因为百度搜索sass，第一个出现就是这篇。
我开始不知道，所以命名为sass，编译半天也不对。（其实有两种语法）
2014年7月 3日 10:49 | 档案 | 引用
栩栩 说：