CSS預處理器Sass -- sass的基本語法(4)

前言：本節開始學習Sass的語法。

　　1.sass的基礎語法。

　　　　<1>sass中的變量

　　　　　　sass中的變量聲明以$符號開頭。

　　　　　　局部變量：只在當前做用域有用。

    body {
        $color: skyBlue;　　　　// body中聲明的$color變量只在當前body大括號中有用。
        color: $color;
    }
    footer {
        color: $color;　　　　  // 報錯 Error: Undefined variable: "$color".

    }

　　　　　　上例中，$color變量只在body大括號中有用，footer中引用$color變量報變量未定義的錯。

　　　　　　全局變量：

　　　　　　　　1.聲明在全部做用外：將$color變量聲明在全部做用域以外。

    $color: skyBlue;
    body {
        color: $color;
    }
    footer {
        color: $color;
    }

　　　　　　　　2.添加!global修飾：在$color變量顏色值以後添加 !global修飾符。

    body {
        $color: skyBlue !global;
        color: $color;
    }
    footer {
        color: $color;
    }

　　　　　　變量默認值：爲變量聲明默認值，在變量未從新賦值時做爲變量值。

        $fontSize: 14px;　　　　　　　　　　　 // 從新賦值爲14px；
        $fontSize: 12px !default;　　　　　　//font-size的默認值爲12px；
        body {
            $color: skyBlue !global;
            color: $color;
            font-size: $fontSize;
        }
        footer {
            color: $color;
        }

　　　　　　多值變量：一個變量中定義了多個值。

　　　　　　　　list類型：經過nth($list, index)，其中list爲變量名，index表示值的索引(從1開始計算)　

    $paddings: 3px 10px 5px 10px;
    body {
        $color: skyBlue !global;
        color: $color;
        padding: $paddings;
    }
    footer {
        color: $color;
        padding-left: nth($paddings , 1);    //經過nth($padding, 1)獲取變量中的第一個值，注意這裏的索引從1開始。
    }

　　　　　　　　map類型：鍵值對的形式組成，經過map-get(map變量，鍵)獲取值。

    $colors: (color: red, borderColor: blue);
    body {
        $color: skyBlue !global;
        color: $color;
    }
    footer {
        color: $color;
        background-color: map-get($colors, color);
    }

　　　　　　變量特殊用法：

　　　　　　　　做爲類名：

            $className: main;
            .#{$className} {
                width: 100px;
                height: 50px;
            }

　　　　<2>sass中的樣式導入

　　　　　　部分文件：專門爲導入而編寫的sass文件，編譯不會生成對應的css文件，文件名一般如下劃線開頭。

　　　　　　導入語法：@import 'sass文件'

　　　　　　　　注意：sass中樣式導入關鍵字和css原生樣式導入關鍵字同樣都是@import，這裏如何做區分呢？

　　　　　　　　原生導入：導入文件不會被編譯。

　　　　　　　　　　1.導入文件以.css結尾。

　　　　　　　　　　2.被導入文件的名字是一個url地址。

　　　　　　　　　　3.被導入文件的名字是CSS的url的值。

　　　

　　　　　　sass導入舉例：_part1.scss文件編譯成了對應的樣式。

　　　<3>sass中的嵌套語法

　　　　1.選擇器嵌套：sass中選擇器的編寫使用選擇器嵌套的方式，這種方式讓選擇器之間的關係解構更清晰。

　　　　　　左側是sass選擇器嵌套的語法，右側是編譯成正常css的語法。

　　　　　　2.屬性嵌套：sass中除了選擇器的嵌套外還有屬性的嵌套，這裏屬性的嵌套只針對中劃線鏈接的屬性。

　　　　　　

　　　　　　左側sass中將background-color，background-size，backgroud-image纔有屬性嵌套的方式編寫，右側是編譯後的css格式。

　　　　　　3.引用父選擇器：在父選擇器內部經過&引用父選擇器。(典型的是超連接元素a標籤)

　　　

　　　　　　左側經過&引用父選擇器a，設置a標籤懸浮的樣式。

　　　　　　4.跳出嵌套：當選擇器嵌套比較深的時候，這時若是咱們想跳出嵌套使用@at-root跳出外層嵌套。

　　　　　　左側sass中選擇器嵌套比較深的時候，當咱們想跳出嵌套時，咱們使用@at-root就跳出了當前的嵌套。

　　　　　　注意：

　　　　　　　　1.遇到媒體查詢@media時，@at-root須要加上條件(without: media rule)才能跳出嵌套。

　　　　

　　　　　　container選擇器包裹在媒體查詢中，須要使用@at-root (without: media rule)才能跳出嵌套。

　　　　<4>sass中的繼承

　　　　　　sass中咱們經過樣式的繼承，能夠實現樣式的複用性。

 　　　　　1.簡單繼承

　　　　　　繼承語法：在子選擇器中經過@extend 父選擇器，實現樣式的繼承。

　　　

　　　　　　上例中.alert-info選擇器經過@extend繼承了選擇器.alert中的樣式。

　　　　　　2.多個繼承

　　　　　　子選擇器中繼承多個父類選擇器的樣式，使用@extend 父類選擇器，多個父類選擇器之間用逗號隔開。

　　　　　

　　　　　　經過@extend 多個父類選擇器用逗號隔開，子選擇器同時繼承了多個父選擇器的樣式。

　　　　　　3.繼承的延伸性

　　　　　　若是子選擇器繼承的父選擇器存在其餘後代選擇器，此時子選擇器會繼承父選擇器及其子選擇器的樣式。

　　　　　　上例中.alert-info選擇器繼承了選擇器.alert的樣式，編譯結果.alert-info連同.alert-error的樣式一塊兒繼承了，這就是繼承的延伸性。

　　　　　　注意：若是繼承a元素的樣式，會連同a的僞類元素(a:hover等)的樣式一同繼承。

　　　　　　4.佔位選擇器

　　　　　　sass中定義的不少公共樣式，咱們但願經過@extend引用編譯到具體的選擇器中，並不但願它們做爲獨立的選擇器編譯到css中，使用佔位符%實現這個需求。

　　　

　　　　　　上例中經過%佔位符後alert樣式就不會單獨的編譯到css中，而是在.alert-info中引用時才編譯。

　　　　總結：本節只學習了sass中一些基礎的語法，更多的語法須要繼續學習。