sass變數的詳細使用

sass變數同javascript變數，可以用來存儲一些信息，並且可以重覆使用。

先來對比一下css中的變數

同css變數對比

CSS 變數是由 CSS 作者定義的，它包含的值可以在整個文檔或指定的範圍內重覆使用。

用CSS變數來實現簡單的代碼：

:root{
    --font-size:18px;
}
.container{
    font-size: var(--font-size);
}

Sass變數

$font-size:14px;
.container{font-size: $font-size;}

編譯後：

.container { font-size: 14px; }

可以看出，兩種達到的效果一樣，但sass更符合程式員的編程模式的方式，可編程、可維護、可擴展....

更多強大的功能是css變數沒法做到的

Sass變數的定義

定義規則：

1. 變數以美元符號($)開頭，後面跟變數名；
2. 變數名是不以數字開頭的可包含字母、數字、下劃線、橫線（連接符）；
3. 寫法同css，即變數名和值之間用冒號(:)分隔；
4. 變數一定要先定義，後使用；

連接符與下劃線

通過連接符（-）與下劃線（_） 定義的同名變數為同一變數，建議使用連接符（-）

例如

$font-size:14px;
$font_size:16px;
.container{font-size: $font-size;}

編譯後：

.container { font-size: 16px; }

局部變數

在選擇器內容定義的變數，只能在選擇器範圍內使用，這種變數稱為局部變數

.container{
    $font-size:14px;
    font-size: $font-size;
}

如果這樣用就不行

.container{
    $font-size:14px;
    font-size: $font-size;
}

.footer{
    font-size: $font-size;
}

全局變數

定義後能全局使用的變數

第一種：在選擇器外面的最前面定義的變數

$font-size:16px;
.container{
    font-size: $font-size;
}
.footer{
    font-size: $font-size;
}

第二種：使用 !global 標誌定義全局變數

.container{
    $font-size:16px !global;
    font-size: $font-size;
}
.footer{
    font-size: $font-size;
}

變數值類型

變數值的類型可以有很多種

支持 6 種主要的數據類型

• 數字，1, 2, 13, 10px
• 字元串，有引號字元串與無引號字元串，"foo", 'bar', baz
• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布爾型，true, false
• 空值，null
• 數組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相當於 JavaScript 的 object，(key1: value1, key2: value2)

例如：

$layer-index:10;
$border-width:3px;
$font-base-family:'Open Sans', Helvetica, Sans-Serif;
$top-bg-color:rgba(255,147,29,0.6);
$block-base-padding:6px 10px 6px 10px;
$blank-mode:true;
$var:null; // 值null是其類型的唯一值。它表示缺少值，通常由函數返回以指示缺少結果。
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);

$fonts: (serif: "Helvetica Neue",monospace: "Consolas");

.container{
    $font-size:16px !global;
    font-size: $font-size;
    @if $blank-mode {
        background-color:#000; 
    }@else{
        background-color:#fff; 
    }
    content: type-of($var);
    content:length($var);
    color: map-get($color-map,color2);
}
.footer{
    font-size: $font-size;
}
// 如果列表中包含空值，則生成的CSS中將忽略該空值。
.wrap{
    font: 18px bold map-get($fonts, "sans");
}

預設值

定義變數時可以用!default來定義預設值

$color:#333;
// 如果$color之前沒定義就使用如下的預設值
$color:#666 !default;
.container{
    border-color: $color;
}