關於Sass

簡介

SASS 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。
使用 Sass 以及 Sass 的樣式庫（如 [Compass](http://compass-style.org/)）有助於更好地組織管理樣式文件，以及更高效地開發項目。
具體可參考中文官網：https://www.sass.hk/

SASS的安裝

先安裝Ruby（下載網址：http://www.ruby-lang.org/zh_cn/downloads/）
安裝完成後在cmd輸入命令：gem install sass
便可安裝成功

SASS的四種編譯風格

nested：嵌套縮進的css代碼，其爲默認值
expanded：沒有縮進的，擴展的css代碼
compact：簡潔格式的css代碼
compressed：壓縮後的css代碼

SASS的一些終端命令

查看sass文件的css內容，在cmd中輸入命令：sass 文件名.scss
把sass文件轉爲css文件,在cmd中輸入命令：sass 文件名.scss 轉換後的文件名.css
               （若想以某種風格壓縮）：sass --style 風格名稱 xxx.scss xxx.css
監聽文件，一旦源文件有變更，會自動生成編譯後的版本。在cmd中輸入命令：sass --watch xxx.scss:xxx.css

更多命令的用法可經過輸入命令sass --help來獲取幫助。

也可以使用nodejs下的gulp模塊來編譯sass

SASS的使用

sass的後綴文件名爲.scss

定義變量：$變量名：$red:red;
若變量須要嵌入在字符串中（組合形式），則必須寫在#{}中：$red:red; .border{border:1px solid #{$red}}

計算功能：能夠是兩個數值運算，也能夠是變量間的運算（兩個變量不能相加）
.border{margin:20px+30px; padding:#{$border*$border}px;}

複用功能（繼承）：一個選擇器繼承另外一個選擇器
第一種：[@extend](https://my.oschina.net/extend) xxx 
.a1{color:blue;}
.a2{[@extend](https://my.oschina.net/extend) .a1; font-size:$num+px}
第二種：定義一個mixin塊，是能夠重用的代碼塊
        [@mixin](https://my.oschina.net/u/3471415) b($b,$f){border:$b+px solid red;font-size:$f+px;}
        .a3{[@include](https://my.oschina.net/JLXINAO) b(2,13);}
        
插入文件：使用import命令來插入外部文件
[@import](https://my.oschina.net/u/3201731) 'xxx.scss'; （若插入是scss文件則把編譯後的代碼文件插入其中。若插入是css文件，則至關於@import url(xxx.css)命令）

條件語句：@if / @if-else / @if-else if
.a4{
    @if $num==5{color:blue;}
    @else if $num==4{color:red;}
 }
 
循環語句：@for / @while / @each
@for:
@for $i from 1 to 10{
    .a5_img#{$i}{
        background-image:url('img#{$i}.png');
    }
}
@while:
$j:9;
@while $j>0{
    .a6_img${$j}{
        background-image:url('img#{$i}.png');
    }
    $j:$j-1;
}
@each:
@each $item in 1,2,3,4,5{
    .a6_img#{$item}{
        background-image:url('img#{$item}.png');
    }
}

函數：@function
@function a7($r){
    @return $r*2; 
}
.a8{
    border:#{a7(2)}px solid #000;
}

選擇器（標籤）嵌套：
div{
    h1{
        color:red;
    }
}
也能夠用'&'表明嵌套規則外層的父選擇器
a {
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
}

屬性嵌套：（便於管理同一類控制的屬性）
a{
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
}

插值語句 #{}:
$name: foo;
$attr: border;
p.#{$name} {
    #{$attr}-color: blue;
}