SASS是什么

傳統(tǒng)的css是一種單純的描述性樣式文件，然而sass可以對(duì)css進(jìn)行預(yù)編譯處理。 在sass源碼中可以使用變量、函數(shù)、繼承等動(dòng)態(tài)語言的特性，并且可以編譯成css文件。

安裝與使用

安裝

由于sass是ruby寫的，所以想要使用sass就需要安裝ruby環(huán)境。然后再使用gem安裝sass。 輸入下面的命令進(jìn)行安裝sass：

gem install sass

可以使用sass -v命令查看sass的版本。

使用

新建一個(gè)后綴名為.scss源碼文件，就可以編輯sass源碼了。 然后使用下面的命令可以將源碼文件編譯轉(zhuǎn)換為css并顯示在屏幕上。

sass test.scss

也可以在后面加上后綴名為.css的文件名，就可以在當(dāng)前目錄生成css文件。如下：

sass test.scss test.css

注：.sass與.scss這兩種的區(qū)別在于.sass文件對(duì)代碼的排版有著非常嚴(yán)格的要求，而且沒有大括號(hào)，沒有分號(hào)。

命令參數(shù)

--style：編譯風(fēng)格?sass提供四種編譯風(fēng)格選項(xiàng)：

nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。

expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼。

compact：簡(jiǎn)潔格式的css代碼。

compressed：壓縮后的css代碼。

e.g.

sass test.scss test.css --style compressed

--watch：監(jiān)聽文件變動(dòng)?sass可以監(jiān)聽源文件變動(dòng)，并自動(dòng)生成編譯后的版本。?e.g.

//監(jiān)聽單個(gè)文件sass --watch test.scss:test.css
//監(jiān)聽目錄sass --watch sassFileDirectory:cssFileDirectory

變量

SASS使用$開頭定義變量

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

如果需要將變量插入到字符串中，需要將變量寫在#{}中

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

運(yùn)算

SASS允許在代碼中使用算式

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

嵌套

SASS允許嵌套規(guī)則

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繼承于另一個(gè)選擇器。

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

Mixin

SASS提供Mixin類似“函數(shù)”的重用代碼塊。 使用@mixin定義樣式代碼塊，然后使用@include調(diào)用該樣式。 不同于@extend的是Mixin定義樣式不會(huì)編譯輸出在CSS樣式中，并且可以指定參數(shù)和默認(rèn)值。

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

需要注意的是，必須先定義沒有默認(rèn)值的參數(shù)，后指定有默認(rèn)值的參數(shù)。

Import

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

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

條件語句

使用@if和@else語句可以用來做條件判斷

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

循環(huán)語句

FOR循環(huán)

使用@for來定義循環(huán)體。?$i表示循環(huán)變量，from?后面跟上開始數(shù)值，to后面跟結(jié)束數(shù)值。

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

WHILE循環(huán)

使用@while定義循環(huán)體，后面跟循環(huán)條件

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

自定義函數(shù)

使用@function語句可以自定義函數(shù)，@return表示函數(shù)的返回值

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