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);}

