30天挑戰：「SCSS built-in color module」相關筆記

總結

SCSS 本身即內建color模組來調整顏色的亮度、透明度，也可直接回傳負片或去飽和度的結果

See the Pen scss:color by Charlie (@Charlie7779) on CodePen.

筆記

• Dart Sass: supports this feature since 1.23.0
• Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.
  • 不透過@use載入color模組的話，則直接呼叫 functions 的 global names；比如color.scale(...)改為呼叫scale-color(...)
• color: scale-color(red, $lightness: -50%);：套用傳入的顏色，但降低亮度 50%
• color: scale-color(red, $lightness: 50%);：套用傳入的顏色，但提昇亮度 50%
• color: grayscale(red);：套用去除飽和度後的傳入顏色
• color: invert(red);：套用負片後的傳入顏色
• color: scale-color(red, $alpha: -75%);：
  • 範例中-75%的意義為「讓傳入的顏色剩下 25%的透明度」
  • 編譯後的 CSS 為color: rgba(255, 0, 0, 0.25);
  • $alpha的值設定為負數才有透明效果；0%為不修改透明度，-100%代表完全透明

參考資料

• sass:color