Sass基礎學習No.2-Sass裡的變數

發表於 更新於 分類於 ，

為什麼要學變數？

  1. 不用重複寫下相同的CSS。
  2. 當需要修改相同CSS值時，只要修改變數就好，而不用逐行檢視修改。

變數如何創造

  • $後面加上命名變數，如$link-color、$link-color-hover。
  • 變數支援資料類型：數值（可包括單位)、字串、顏色、布林值。
  • 要將該變數變成字串取值的話，要以**#{$變數名}**呈現，這樣就會成為純文字。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$link-color: #ff00ee;
$bg-img:'../img/';
$icon-style:blue;
$link-num:2;
a {
    color: $link-color;
}
.main {
    background-image:url(#{$bg-img}apple.jpg);
}
.icon-#{$icon-style} {
    color: $icon-style;
}
.main_link-#{$link-num}{
    color: $link-color;
}
.bg-#{$link-num}{
    background-image: url(#{$bg-img}banana.png);
}

如何創造字體變數

在CSS中，使用font-family設定一種字體或多種不同的字體，每種字體間用半形逗號「,」隔開，除了字體名稱中間空格須加入單引號或雙引號外，其餘字體名稱無須加入單或雙引號。

基於上述當需要加入字體名稱變數時，也應該遵守上面所述規矩。

有關字體的詳細介紹與使用，可以參考CSS font-family 詳細介紹

1
2
3
4
5
6
7
$link-color: #ff00ee;
$font-family-base:Arial、'Arial Black'、'Arial Narrow'、Charcoal、Geneva、Impact、'Trebuchet MS'、Tahoma、Verdana;

a {
    color: $link-color;
    font-family: $font-family-base;
}

Sass變數與加減乘除的組合

透過Sass內建的計算功能，在調整每個區塊大小時，就不用手動去更改每個區塊的數字了，並且在滿版的畫面中，比較不會有留白問題(在手動設置時常會因除不盡而取最接近的值)。

1
2
3
4
$width:450px;
.items-width {
    width: ($width+200px)/6;
}

透過darken、lighten變數顏色

lighten($color, $amount)顏色變淺函式和darken($color, $amount)顏色變深函式。

**$amount**是調節顏色的亮度，取值範圍是0~100%。

Sass裡顏色函式運用，可以參考Sass關於顏色函式的樂趣。
顏色的命名可以參考 ColorHexa。

將所需的顏色作為變數命名(稱變數A)後(可以參考 ColorHexa 命名規則)，再去以另一個新變數(稱變數B)作為之後常用的顏色變數，如此一來，之後要更改整個頁面的主色彩只需要創造另一個新顏色變數(變數C)後，再將變數C作為變數B的值。

1
2
3
4
5
6
7
8
9
$Amaranth:#e52b50;//顏色變數
$American-rose:#ff033e;
$primary:$Amaranth;//常用色彩，之後要變更常用色彩之需更改此值
$main-color:lighten($primary,50%);

a {
    color: darken($primary,10%);
    background-color: $primary;
}

常見變數編譯錯誤

  • 變數編譯是從上到下，所以不能在創造變數前取值。
  • Scss注意小細節，變數結尾要加上 ; 。