SCSS 函式與判斷

作為一種語言，SCSS 當然也有 function。
SCSS function 會處理丟進來的參數，並返回一個值。

SCSS 內建了許多關於顏色的 function，例如加深/加亮，我們可以這麼寫：

a {
    color: darken(#08c, 10); //#08c 變暗10個單位
}

之前提過的 map-get() 與 nth() 都是函式的一種，它們會代出 map 與 list 的值：

$facebook: ( 'pic': 'facebook.png' );
map-get($facebook, 'pic'); //取出'pic'  的值'facebook.png'

$list: 12px;
nth($list, 1); //取出第一個項目 12px

當然我們也可以自定義一個 function：

//自訂加深顏色的函式 deeper
function deeper($color, $int: 1){  //第一個參數是顏色，第二個參數是加深的倍數(預設1)
     @return darken( $color, $int * 10 );  //返回一個加深的顏色，加深的參數會被乘以10倍
}

我們就可以使用這個方法：

a {
    color: deeper(#08c); //#08c 變暗10個單位
}

我們也可以使用 SCSS 的 if else 判斷：

//自訂加深顏色的函式 deeper
function deeper($color, $int: 1){  //第一個參數是顏色，第二個參數是加深的倍數(預設1)

    @if ( lightness(darken( $color, $int * 10 )) < 20 ) {   //如果顏色已經很深了
         @return $color; //返回原色
    } @else {
         @return darken( $color, $int * 10 );  //返回一個加深的顏色，加深的參數會被乘以10倍
    }
}

function 與判斷能讓我們把 coding 的精神帶入 CSS ，允許我們打造更多好用的工具，希望大家一定要試試看。