學過CSS的人都知道，它不是一種編程語言。javascript
你能夠用它開發網頁樣式，可是無法用它編程。也就是說，CSS基本上是設計師的工具，不是程序員的工具。在程序員眼裏，CSS是一件很麻煩的東西。它沒有變量，也沒有條件語句，只是一行行單純的描述，寫起來至關費事。css
很天然地，有人就開始爲CSS加入編程元素，這被叫作"CSS預處理器"（css preprocessor）。它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。html
各類"CSS預處理器"之中，我本身最喜歡SASS，以爲它有不少優勢，打算之後都用它來寫CSS。下面是我整理的用法總結，供本身開發時參考，相信對其餘人也有用。前端
============================================java
SASS用法指南node
做者：阮一峯python
1、什麼是SASSlinux
SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。git
本文總結了SASS的主要用法。個人目標是，有了這篇文章，平常的通常使用就不須要去看官方文檔了。程序員
2、安裝和使用
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、基本用法
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、代碼的重用
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、高級用法
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);
}
（完）
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 | 檔案 | 引用
栩栩 說：