Sass教學-變數篇

-

  • 為什麼要使用變數呢?
專案實務上若要調整網頁主題色、間距、文字大小等等，不太可能會一個個手動更改(太花時間)，因此變數存在的目的就是幫助我們管理常用變數條件、加快開發效率

  • 變數介紹(目的：進行全域統一管理較為方便)
寫法：$font-l:18px;
寫法說明：
1.最前面有一個$符號
2.接著進行css命名(取名字可以往易辨識方向)
3.再來加上屬性
4.將 $font-l寫在scss/sass最前面
原因：sass編譯時，是從上到下所以若不是放在最前面會有undefined情況發生
Tips：結束時要加分號;，沒加會產生semicolon錯誤訊息

範例如下：
$background: yellow;

.header{
    background: $background;
}

.body{
    background: $background;
}

.footer{
    background: $background;
}
如此，prepos就會幫我們將css編譯完成瞜~

  • Sass進行運算  語法：「$」+「變數」+「乘除運算」
數字程式碼：
$font-m:16px;/*設定大小時候預設值要放第一個才能成功編譯*/
$font-l:$font-m * 1.5;      //24px
$font-s: $font-m * 0.9;    //14.4px

字串程式碼：
$font-family-base: "Microsoft JhengHei", "Roboto", "Helvetica Neue",
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-title:"Segoe UI";

CSS的font-family要不要加引號是根據該字體名稱中間有沒有空格才對，如果沒有空格而加引號的話反而會失敗

顏色字串程式碼：
備註：Sass預設有darken、lighten屬性
.box1{
  background: $base-color;
}

.box2{
  background: darken(#ff0000,40%);
}

.box3{
  background: lighten($base-color,30%);
}

補充：運算時可能會遇到的狀況

1.沒有空白間隔(如下圖編譯錯誤)

>>>建議加減乘除統一都用空格相鄰

2.單位介紹  

css常見的單位類型可分為「絕對單位」和「相對單位」，簡單解釋如下:
「絕對單位」: 印刷輸出的單位，如px, pt, pc, in, mm, cm…
「相對單位」: 顯示設備的單位，如ex, em, rem…

>>相對單位不能互相運算
>>絕對單位不能相乘  EX：pt*pt
結論：單位不要混搭，只用一個單位，這樣就減少出錯的機率



延伸閱讀：

SASS : 變數-運算單位介紹：https://ithelp.ithome.com.tw/articles/10204038

留言

張貼留言