Sass

注：配合查看：Sass和Compass設計師指南 

Sass是基於Ruby編程語言的命令行工具。要使用它就必須先在電腦上安裝Ruby，Ruby的安裝能夠經過網址：http://rubyinstaller.org/downloads/，下載最新版Ruby進行安裝，安裝完後能夠使用ruby -v進行驗證是否安裝成功

Sass安裝

經過使用Ruby自帶的 RubyGems的系統來進行安裝

$ gem install sass

使用sass -v驗證是否安裝成功

Sass使用

sass test.scss

能夠在命令行顯示.scss文件轉化的css代碼

sass test.scss test.css

 能夠將命令行顯示的結果保存成文件

Sass提供的編譯風格：

一、nested ： 嵌套縮進的CSS代碼，它是默認值

二、expanded ： 沒有縮進的、擴展的CSS代碼

三、compact ：簡潔格式的CSS代碼

四、compressed ： 壓縮後的CSS代碼

編譯風格的使用：

sass  --style compressed test.scss test.css

讓Sass監聽某個文件或目錄，一旦源文件改動，自動生成編譯後的版本

監聽文件

sass --watch input.scss:output.css

 監聽目錄

sass --watch app/sass:public/stylesheets

sass語法

一、老版本.sass後綴的語法

經過tab鍵縮進的一種語法規則，而且要求很是嚴格，還不帶有任何大括號和分號，容易出錯，不太被接受（Python程序員應該會很喜歡）

二、.scss後綴的語法

sass的新語法格式，外形與CSS幾乎如出一轍，代碼都包裹在一對大括號裏，末尾結束處都有一個分號

基本用法

一、變量

全部變量以$開頭

$blue : #1875e7;

div {
    color : $blue;
}

 若變量需嵌套在字符串中，就必須寫在#{}中

$side : left;
.rounded {
    border-#{$side}-radius : 5px;
}

二、計算功能

body {
    margin : (14px/2);
    top : 50px + 100px;
    right: $var * 10%;
}

三、嵌套

div h1 {
    color: red;
}

能夠寫成：

div {
    h1 {
        color: red;
    }
}

屬性也能夠嵌套：

p {
    border: {
        color: red;
    }
}

注：border後面必須加冒號

在嵌套的代碼塊內，能夠使用&引用父元素，例：a:hover能夠寫成

a {
    &:hover{ color: #ffb3ff;}
}

四、註釋

標準的CSS註釋/* */會被保留到編譯後的CSS文件中

單行註釋//，只保留在SASS文件中，編譯後被刪除

在/* 後加個!，表示是重要註釋，即便使用壓縮模式編譯，也會保留這行註釋，可用於聲明版權信息

/* !

    重要註釋

*/

 代碼重用

一、繼承

SASS容許一個選擇器繼承另外一個選擇器。例：

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

class2要繼承class1就要使用@extend命令

.class2 {
    @extend .class1;
    font-size: 100%;
}

二、Mixin

Mixin有點像C語言的宏（macro），是能夠重用的代碼塊

使用 @mixin定義個一個代碼塊

@mixin left{
    float: left;
    margin-left: 10px;
}

 使用@include命令，調用這個宏

div {
    @include left;
}

mixin的強大之處在於能夠指定參數和缺省值

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}

使用時根據狀況輸入參數

div {
    @include left(20px);
}

示例：

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

注：Firefox支持的廠商前綴寫法是非標準的-moz-border-radius-topleft，而不是-moz-border-top-left-radius

調用

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }

三、顏色函數

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

四、插入文件

@import命令用以插入外部文件

@import "path/filename.scss";

若插入的是css文件，則等同於css的import命令

@import 「foo.css」;

高級用法

一、條件語句

@if能夠用來判斷：

p {
    @if 1 + 1 == 2 {border: 1px solid #ddd; }
    @if 5 < 2 {border: 2px dotted #ccc; }
}

以及@else配套使用

@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

二、循環語句

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循環

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("test.jpg");
    }
}

三、自定義函數

@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(2px);
}

注：本文參考自：http://www.ruanyifeng.com/blog/2012/06/sass.html