Sass 學習筆記（二） – 變數

Sass 除了能讓我們寫巢狀結構外，還能夠定義變數，非常簡單，以下範例大家應該可以很快能理解 Sass 變數的用法！

// 不使用變數
.header a {
    color: blue;
}
.menu a {
    color: #666;
}
.nav a {
    color: blue;
}
.footer a{
    color: #666;
}

// 使用變數

$link-color-primary: blue;
$link-color-secondary: #666

.header a {
    color: $link-color-primary;
}
.menu a {
    color: $link-color-secondary;
}
.nav a {
    color: $link-color-primary;
}
.footer a{
    color: $link-color-secondary;
}

這個範例才四行，看不出什麼方便性，但是如果今天$link-color-primary被用在幾十行程式碼上時，我們只要變更開頭的變數的值，就可以不用一行一行修改，也就是說，我們只要看前二三十行的變數設定，就可以維護大部分的程式碼，方便非常多。

另外，變數也可以存字串和運算，而且也可以用模板字串，請看以下範例：

$five-pixel: 5px;
$path-pic: '../img/'; 

.header {
    margin: $five-pixel * 5;
    background-image: url("#{$path-pic}logo.png");
}

轉譯成 CSS ：

.header {
  margin: 25px;
  background-image: url("../img/logo.png");
}