Sass 新手入門(3)函數應用

續上一篇 Sass 進階應用，這篇列表 Sass 內建函數，及自定義函數的用法。

內建函數

lighten & darken

基本語法

  :lighten( color, 50%)
  :darken( color, 50%)

範例

  $color-main: #00F;
  $color-main-light30: lighten($color-main, 30%);
  $color-main-dark30: darken($color-main, 30%);

  a{
      background-color: $color-main;
      &:hover{
          color: $color-main-light30;
      }
      &:active{
          color: $color-main-dark30;
      }
  }

補充：關於hsl & hsla

一般網頁色瑪用 RGB(#00FF00)來定義，六個數字兩兩一組各代表紅色、綠色、藍色的色值，而色值是16進位制表示0~255之間(00 = 0，FF = 255）

hsla:
- 色相（Hue）: 0~360
- 飽和度（Saturation）: 0 ~ 100%
- 亮度（Lightness）: 0 ~ 100%
- 透明度（alpha）: 0 ~ 1

基本語法

  hsl(0, 100%, 50%)
  hsla(0, 100%, 50%,　0.5 )

範例

  span{
      color: hsl(20, 100%, 50%);
      background-color: hsla(20, 100%, 50%, 0.5);
  }

顏色函數

function	do	eg
`adjust-hue(color, __deg)`	調整顏色的色相(hsl中的h)	($main-color, 137deg)
`saturate(color, __%)`	增加顏色的飽和度(hsl中的S)	($main-color, 50%)
`desaturate(color, __%)`	減少顏色的飽和度(hsl中的S)	($main-color, 50%)
`transparentize(color, 0.3)`	顏色變得更透明 (減少alpha值)	($main-color, 0.3) 原本alpha-0.3
`opacify(color, 0._)`	顏色變得更不透明 (增加alpha值)	($main-color, 0.3%) 原本alpha+0.3
`lighten(color, __%)`	增加顏色亮度(明度)	($main-color, 30%)
`darken(color, __%)`	減少顏色亮度(明度)	($main-color, 30%)

數字函數

function	do	eg
`abs()`	絕對值	(-5)→5
`round()`	取整數-四捨五入	(-3.6)→4 (-3.1)→3
`ceil()`	取整數-無條件進位	(-3.6)→4 (-3.1)→4
`floor()`	取整數-無條件捨去	(-3.6)→3 (-3.1)→3
`percemtage()`	計算比例	(10px / 100px) → 10%
`min()`	取最小值	(1, 2, 3) → 1
`max()`	取最大值	(1, 2, 3) → 3

文字函數

function	do	eg
to-upper-case()	字串轉大寫	(Hello)→HELLO
to-lower-case()	四捨五入取整數	(Hello)→hello
str-length()	回傳字串長度	(Hello)→5
str-index(string, keyword) (index從1開始)	查特定自在字串中的位置	("Hello Eudora", "Hello")→1
str-insert(string, addString, index)	字串中插入值	("Hello", " Eudora", 5)→"Hello Eudora"

自定義函數

語法

  @function name(argument1, argument2...){
      ...
      @return ...
  }

例：搭配 map 應用

  $theme: (
      light: #ccc,
      dark: #222
  );

  @function theme($mode) {
      @return map-get($theme, $mode);
  }

  body {
      background-color: theme(dark);
  }

compiled:

  body {
      background-color: #222;
  }

參考資料