今天我們要來介紹 Sass的變數啦~~
介紹之前
我們必須先了解
為什麼我們需要它呢??
當我們原先在撰寫 css的時候
假設有100個地方的顏色皆為紅色
但有一天
我們需要更動這些顏色
那我們豈不是要一行一行的去改嗎
想到就非常麻煩呀~~
這時候變數就可以解決你的問題
那究竟要怎麼寫呢??

Sass變數(variables)
1.將時常要設定的 css 放在變數來管理
2.變數是用美元符號($)開頭

$text-color: #37523d;
body{
  color: $text-color
}

這裡編譯後
會變成這樣

body {
  color: #37523d;
}

CodePen: https://codepen.io/wemyferb/pen/XWKWvbg
注意:
1.
要記得補上分號 不然會編譯錯誤
2.
由於 Sass編譯是由上往下
所以 有使用到變數的話 變數一定要在使用的地方前面

到這裡會發現現在寫的東西開始有 語意化 啦~~

變數搭配加減乘除

這裡先介紹 Sass變數的格式有哪些

• 格式

1. 數字: 10px , 1rem
2. 字串: 'test' , '../images/dog/'
3. 顏色: #000000 , rgba(0,0,255,255,0.1) , red
4. 布林: true , false
5. 空值: null

• 支援運算
  (10px*2)

$font-sm: 50px;
$font-md: $font-sm*1.5;
span{
  //50px
  font-size: $font-sm;
}
p{
  // (50*1.5)px --> 75px
  font-size: $font-md;
}

CodePen: https://codepen.io/wemyferb/pen/qBNEExJ

Sass 字串管理

$font-family-base: 'monospave';

body{
  font-family: $font-family-title;
}

Sass darken 與 lighten

$base-color: #0072E3;
.box{
  width: 100px;
  height: 100px;
  margin: 20px;
}

.box1{
  background: $base-color;
}

.box2{
  //darken : 以$base-color為基底 再暗20%
  background: darken($base-color,20%);
}

.box3{
  //lighten : 以$base-color為基底 再亮30%
  background: lighten($base-color,30%);
}

CodePen:https://codepen.io/wemyferb/pen/ZEOYYVv

那今天的 Sass 介紹就到這裡啦
明天將介紹如何將 Sass切分成多支檔案來管理
若有任何問題 或 內容有誤
都可以跟我說唷