Sass使用教程

sass官網：

http://sass-lang.com/

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Sass和Scss的關係

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just 「Sass」), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Some people find this to be easier to read and quicker to write than SCSS. The indented syntax has all the same features, although some of them have slightly different syntax; this is described in the indented syntax reference. Files using this syntax have the .sass extension.

Either syntax can import files written in the other. Files can be automatically converted from one syntax to the other using the sass-convertcommand line tool:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass 有兩種語法規則(syntaxes),目前新的語法規則（從 Sass 3開始）被稱爲 「SCSS」( 時髦的css（Sassy CSS）),它是css3語法的的拓展級，就是說每個語法正確的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss做爲拓展名。
第二種語法別成爲縮進語法（或者 Sass），它受到了 Haml的簡潔精煉的啓發，它是爲了人們能夠用和css相近的可是更精簡的方式來書寫css而誕生的。它沒有括號，分號，它使用 行縮進 的方式來指定 css 塊，雖然sass不是最原始的語法，可是縮進語法將繼續被支持，在縮進語法的文件以 .sass 爲拓展名。

首先，讓咱們得到Sass並搭配環境.若是你使用 OS X,那麼你已經安裝了Ruby. Windows 用戶能夠經過Windows安裝程序來安裝, Linux能夠經過包管理(apt-get)來安裝.

當Ruby安裝好後,你能夠安裝 Sass 了，運行：

gem install sass

就安裝成功了。

下面的命令，能夠在屏幕上顯示.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%;
　　}

（結果爲：

.class1, .class2 {
border: 1px solid #ddd; }

.class2 {
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% {
　　　　background-color: #000;
　　} @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);
　　}

（完）

轉自：http://www.ruanyifeng.com/blog/2012/06/sass.html

更多：

http://ruby-china.org/topics/4396

http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/

http://sass-lang.com/guide

Compass用法指南