[筆記] Sass 實戰全攻略 – 2 – 變數的運用

章節連結

變數在 Sass 的運用上,最為方便就是可以事先定義一些常用的基準變數,如顏色、大小、字體……等等,同時在搭配運算子進行加減乘除。如此一來,在「語意化」和「維護度」上都可以擁有顯著的提升。
sass logo


課程對應章節

Course 10 ~ Course 16 (全部一共有 72 Courses)

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。課程連結網址:http://tinyurl.com/ueo7bm2

內容

1.使用 “$” 來進行變數宣告,最後要記得打上 ; ,否則會編譯錯誤
2.可以在變數內使用其他的變數,創造兩者的關聯性
3.可以對變數進行加減乘除
4.撰寫時,請記得是由上到下逐行讀取。若有出現變數的參照失效,除了打錯字、忘記宣告以外,大概就是行數放置錯了
5. darken(<顏色>,<百分比>):將以某個顏色為基礎,加深%,Scss 內建,無需宣告
6. lighten(<顏色>,<百分比>):將以某個顏色為基礎,調淡%,Scss 內建,無需宣告

範例

 


Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:22