sass

Scss旅程(10) – 函式

今天的旅程只有一個部分:函式

其實這個部分應該是上一篇的範圍,但內容有點多所以獨立一章。各位別忘記盯著螢幕(手機也好電腦也好),半小時或一小時記得起來走一走望遠凝視一下啊。

1. 函式(function)

函式部分,Sacc/Scss提供的有四種:if-else、for、while和each

1.1.if-else

if-else在Scss裡長這樣:

  1. $type : meadow;
  2. #if-test{
  3.   @if $type == meadow{
  4.     background: #8fae24;
  5.   }@else if $type == sunny{
  6.     background: #f7a620;
  7.   }@else{
  8.     background: #54a6e6;
  9.   }
  10. }

或者是這樣:

  1. $type : meadow;
  2. #if-else{
  3.   //如果比對正確,選擇第二格的答案;如果錯誤,選擇第三格的答案
  4.   background: if($type==ocean,#54a6e6,#8fae24);
  5. }

可以看到Sass / Scss 的 if-else 除了提供一般常見的多層式判斷外,也提供簡易版本,同時兩者的寫法都有幾個跟其他語法不太一樣的點需要注意。

  1. 在「if」跟「else if」之前有個「@」
  2. 在「if」之後的條件並不需要使用小括號包住,只需要用空白隔開。
  3. 第二種簡易型寫法注意「if」之前沒有「@」喔,而三個參數之間是用半形逗號「,」分隔。

前兩點是第一次接觸Scss要注意的地方,基本上各種函式前都會有個「@」,除了那個單行的「if-else」。

實際使用:

function-if-else-01
[圖一]if-else的Scss和Css比對

1.2.for

for在Sacc/Scss裡長這樣:

  1. @for $type from 0 to 5{
  2.   .circle-#{$type+1} {
  3.     background: #205df7;
  4.     opacity: ($type+5)%10/10;
  5.   }
  6. }

就如剛剛介紹if-else說過,Sass / Scss 的函式前方都須加上「@」符號,這是最需要注意的一點。另外參數設定同樣無須用小括號包住,僅需要和 for 之間隔一個空白。

第三點是剛剛 if-else 沒出現過的,使用迴圈的參數。

使用「迴圈參數」時需要使用大括號包住,且大括號前需要一個「#」。這一點比較容易遺忘,要特別注意喔。

實際使用:

function-for-01
[圖二]for迴圈的Scss和Css比對

1.3.while

while在Sass/Scss裡長這樣:

  1. $type : 0;
  2. @while $type <5{
  3.   .circle-#{$type+1} {
  4.     background: #205df7;
  5.     opacity: ($type+5)%10/10;
  6.   }
  7.   $type : $type+1;
  8. }

while 其實可以算是一種變形版的for迴圈,注意事項跟for迴圈一模一樣。「@」、條件無需使用小括號及迴圈變數需大括號及「#」。

除了這三點外,還有一點就是while迴圈最重要的:使用變數要初始化!

那個「$type : 0;」是最重要的,還有「$type : $type+1;」也是(曾經遺忘結果被陰了啊哈哈哈哈(哭

實際使用:

function-while-01
[圖三]while的Scss和Css比對

1.4.each

each在Sacc/Scss裡長這樣:

  1. $square : red,blue,green,yellow;
  2. @each $squ in $square{
  3.   #block-#{$squ} {
  4.     background : $squ;
  5.     border-radius : 10px;
  6.   }
  7. }

 

身為迴圈家族之一的 each,需要注意的點無非「@」、迴圈的條件無需使用小括號包住、使用「變數」需要大括號與「#」。

實際使用:

each的Scss和Css比對
[圖四]each的Scss和Css比對
一路看下來綜合以上四個函式來看,要注意的點根本都一樣:

  1. 別忘記「@」
  2. 條件無須用小括號包住
  3. 使用「變數」時需要使用大括號和一個「#」
  4. 部分函式變數記得初始化(認真

對不起我知道最後一點有點好笑,但整天盯著程式碼真的會眼花想睡啊,然後不小心就會出事ORZ。

以上是四種函式的使用方式,之後搭配「mixin」會讓寫法更加靈活,也無須把一堆function都擠在同一個Scss檔案裡,而是可以根據功能分成數個不同的小檔案,當需要時再進行載入就好。

關於「mixin」就敬請期待。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.