Sass的基礎姿式

SASS是什麼

傳統的CSS是一種單純的描述性樣式文件，然而SASS能夠對CSS進行預編譯處理。 在SASS源碼中能夠使用變量、函數、繼承等動態語言的特性，而且能夠編譯成CSS文件。

安裝與使用

安裝

因爲sass是ruby寫的，因此想要使用sass就須要安裝ruby環境。而後再使用gem安裝sass。 輸入下面的命令進行安裝sass：

gem install sass

能夠使用sass -v命令查看sass的版本。

使用

新建一個後綴名爲.scss源碼文件，就能夠編輯sass源碼了。 而後使用下面的命令能夠將源碼文件編譯轉換爲css並顯示在屏幕上。

sass test.scss

也能夠在後面加上後綴名爲.css的文件名，就能夠在當前目錄生成css文件。以下：

sass test.scss test.css

注：.sass與.scss這兩種的區別在於.sass文件對代碼的排版有着很是嚴格的要求，並且沒有大括號，沒有分號。

命令參數

--style：編譯風格 sass提供四種編譯風格選項：

• nested：嵌套縮進的css代碼，它是默認值。
• expanded：沒有縮進的、擴展的css代碼。
• compact：簡潔格式的css代碼。
• compressed：壓縮後的css代碼。

e.g.

sass test.scss test.css --style compressed

--watch：監聽文件變更 sass能夠監聽源文件變更，並自動生成編譯後的版本。 e.g.

//監聽單個文件
sass --watch test.scss:test.css
//監聽目錄
sass --watch sassFileDirectory:cssFileDirectory

變量

SASS使用$開頭定義變量

$white:#FFFFFF;
body{
    color: $white;
}

若是須要將變量插入到字符串中，須要將變量寫在#{}中

$imgUrl:"../img/test.png";
body{
    background-image: url(#{$imgUrl});
}

運算

SASS容許在代碼中使用算式

$min-left:10px;
body{
    margin-left:$min-left+20px;
}

嵌套

SASS容許嵌套規則

div{
    //選擇器嵌套
    p{
        color:#FFFFFF;
    }
    //屬性嵌套
    margin:{
        left:10px;
    }
    //僞類嵌套
    &:hover{
        color:#F4F4F4;
    }
}

編譯成CSS樣式爲：

div {
  margin-left: 10px;
}
div p {
  color: #FFFFFF;
}
div:hover {
    color: #F4F4F4;
}

繼承

SASS能夠使用@extend繼承於另外一個選擇器。

.page{
    background-color:#F7F7F7;
}
.div1{
    @extend .page;
    color:#FFFFFF;
}

Mixin

SASS提供Mixin相似「函數」的重用代碼塊。 使用@mixin定義樣式代碼塊，而後使用@include調用該樣式。 不一樣於@extend的是Mixin定義樣式不會編譯輸出在CSS樣式中，而且能夠指定參數和默認值。

//不帶參數的mixin
@mixin page{
    background-color:#F7F7F7;
}
//帶參數的mixin
@mixin setDefMargin($left, $right, $bottom: 10px,$top: 10px){
    margin:$top $right $bottom $left;
}
.test{
    @include page;
    @include setDefMargin(20px,30px);
    color:#FFFFFF;
}

須要注意的是，必須先定義沒有默認值的參數，後指定有默認值的參數。

Import

sass能夠使用@import語句，來引用指定的外部文件。

//引入scss文件
@import "variable.scss";
//引入css樣式文件
@import "style.css";

條件語句

使用@if和@else語句能夠用來作條件判斷

$min-margin: 10px;
@mixin init-margin($left){
    //判斷傳入的參數是否大於最小值
    @if $left > $min-margin {
        margin-left: $left;
    } @else {
        margin-left: $min-margin;
    }
}
body {
    @include init-margin(5px);
}

循環語句

FOR循環

使用@for來定義循環體。 $i表示循環變量，from 後面跟上開始數值，to後面跟結束數值。

@for $i from 1 to 20 {
    .page-index#{$i} {
        color: #FFFFFF;
    }
}

WHILE循環

使用@while定義循環體，後面跟循環條件。

//循環變量
$i: 2;
@while $i<10{
    page-index#{$i} {
        color: #F4F4F4;
    }
    $i=$i=1;
}

自定義函數

使用@function語句能夠自定義函數，@return表示函數的返回值

@function calcNumber($num) {
    @return $num+10;
}
body {
    margin-left: calcNumber(20px);
}