sass

Scss旅程(9) – 數學與邏輯運算

今天的旅程有兩個部分要介紹,分別是數學與邏輯運算

常在寫javascript或是曾經接觸過javascript,或者是接觸過其他語言,如C++、C等等的話,大概對這兩個部分都不會感到陌生,而這也是某貓決定跳這個大坑的其中一個原因!

原本還有一個函式(function),但篇幅太大了所以調成下一篇,敬請期待。

1.數學(Math)

1.1.基礎運算

先來看看幾個運算的例子:

  1. 1px + 1px //2px
  2. 5em-2em //3em
  3. 60px*3 // 180px
  4. 20px/10 //2px
  5. 15px%2 //1px

可以看到基本的加減乘除都有支援,甚至取餘數(%)也有支援,當然雖然範例裡沒出現,但運算裡很重要的小括號當然也有支援。

看到以上範例大家可能會有一個疑問,單位呢?兩兩運算後,單位究竟跟誰?以及單位不同可以運算嗎?這邊直接看範例:

logic-operator-01
[圖一]運算子與單位
由範例可以看到如果單位不對就無法進行運算,但如果是一個無單位和一個有單位的進行運算的話看來是沒有問題的,運算結果也是以有單位的為主。

1.2.數學函式

Sass / Scss 提供的數學函式有以下幾個,都是很常見的運算數學函式:

  1. abs(-10) //10,絕對值
  2. ceil(3.29) //4,天花板取值,無條件進位取整數
  3. floor(3.29) //3,地板取值,無條件捨去取整數
  4. percentage(12/60) //20%,百分比
  5. round(3.4) //3,四捨五入

基本可以使用的數學函式有這五個,比較有疑慮的應該是percentage,在面對除不盡的數字時,percentage 轉換成百分比後,小數點後最多最多保留到5位。

math-01
[圖二]百分比對於小數點的測試

1.3.使用範例

  1. $mainWidth : 1200px;
  2. $sidebarWidth : 300px;
  3. $articleWidth : $mainWidth – $sidebarWidth;

可以看到搭配變數來使用還真方便……對於一些寬度會隨著其他部分變動的元素可以使用這種寫法,既不怕心算出錯(別懷疑,有時候就是會栽在這種奇怪的地方),也不怕手滑打錯字或符號(被陰過好幾次)。

另外還有一個點要注意,當兩個變數進行四則運算時,記得在變數與符號之間空一格,不然那個符號會被判斷成變數的一部份。

2. 邏輯運算(Logic Operators)

第二部分要介紹的是常見的「邏輯運算子」,就是大於等於小於……等等的符號。常見的邏輯運算子要分類的話,其實可以分成兩種:比較型與關係型。

比較型就是有比較動作的:等於或不等於。

  • ==:1==1,true,等於,這絕對不是表情符號(認真)
  • !=:1!=1,false,不等於。

關係型:

  • >:1>1,false,大於。
  • <:1<1,false,小於。
  • >=:1>=1,true,大於等於。
  • <=:1<=1,true,小於等於。

一般對於這種邏輯運算子的使用不外乎就變數之間的比較,或是變數與某個數字/字串,甚至是布林值的比較,但在Sass/Scss裡,這種邏輯運算子可不只能用在「變數與變數/數字/字串/布林值」之間喔。

像是顏色之間的比較:「black==#000000」,這也可以喔!而且出來的結果會是「true」。

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.