函式(Functions)

SCSS中也有@function可以定義自訂的函式，也有一些簡單的程式語法，例如@return、@if、@for、@each等流程控制的特性，以及簡單的運算能力。

首先可以建立一個變數

$navShow :true;

在nav這個calss裡面用if else去判斷 依照變數情況去改變css 的屬性

$navShow :true;
.nav {
    @if $navShow==true {
        display: table;
    }
    @else {
        display: none;
    }
}

for迴圈

//變數從1到10 #{$i} 才會判斷是變數

.nov {
    @for $i from 0 to 10 {
        .item-#{$i} {
            font-size: 16px;
        }
    }
}

css編譯結果

.nov .item-0 {
  font-size: 16px; }

.nov .item-1 {
  font-size: 16px; }

.nov .item-2 {
  font-size: 16px; }

.nov .item-3 {
  font-size: 16px; }

.nov .item-4 {
  font-size: 16px; }

.nov .item-5 {
  font-size: 16px; }

.nov .item-6 {
  font-size: 16px; }

.nov .item-7 {
  font-size: 16px; }

.nov .item-8 {
  font-size: 16px; }

.nov .item-9 {
  font-size: 16px; }

變數也可以用在值身上

.nov {
    @for $i from 0 to 10 {
        .item-#{$i} {
            font-size: #{$i};
        }
    }
}

css編譯結果

.nov .item-0 {
  font-size: 0px; }

.nov .item-1 {
  font-size: 1px; }

.nov .item-2 {
  font-size: 2px; }

.nov .item-3 {
  font-size: 3px; }

.nov .item-4 {
  font-size: 4px; }

.nov .item-5 {
  font-size: 5px; }

.nov .item-6 {
  font-size: 6px; }

.nov .item-7 {
  font-size: 7px; }

.nov .item-8 {
  font-size: 8px; }

.nov .item-9 {
  font-size: 9px;

都可以自己去做變化

each

先新增一個陣列 裡面有apple banana

$list:apple banana

現在list裡面有apple banana 之後我們會依序丟到item這個項目

.ncv{
    @each $item in $list
}

那for 跟each 有什麼不同?

for 可以指定1～10

each 是去針對裡面到底有多少數字 來去跑幾次迴圈 這個範例就是裡面有的項目都跑一次 增加他的calss

就是說可以把裡面的東西印出來

//用each 依序去新增他的class 
.ncv{
    @each $item in $list{
        .#{$item}{
            font-size:28px;
        }
    }
}

css編譯結果

.ncv .apple {
  font-size: 28px; 
}

.ncv .banana {
  font-size: 28px;
}

while

先建立一個變數types

$types:4;

while >> 就是說如果這個type大於0的話就繼續這個迴圈，直到 $types > 0錯誤 才會停止

所以在 裡面遞減 他就會跑完4個 （此時type小於0就會停止 所以才跑4個）

.npv{
    @while $types > 0{
        .item{
            font-size:18px;
        }
        $types:$types - 1 
    }
}

編譯成css 會跑4個

.npv .itema {
  font-size: 18px; }

.npv .itema {
  font-size: 18px; }

.npv .itema {
  font-size: 18px; }

.npv .itema {
  font-size: 18px; }

SCSS中也內建了許多工具函式，詳見內建函式的清單，常用的例如按比例加亮顏色的lighten與按比例加深顏色的darken，裡面有關於顏色、透明度、字串、數字的函式很多。以下為範例:

$awesome-blue: #2196f3;

a {
  background-color: $awesome-blue;
  padding: 10px 15px;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}