iT邦幫忙

DAY 4
11

30天掌握Sass語法系列 第 4

30天掌握Sass語法 - (4)利用Sass「內建計算機」,讓你不用再重複計算CSS像素

Sass還有一個很特別的功能,也就是內建擁有加減乘除的語法,
但是,他究竟能支援設計師寫CSS什麼樣的工作呢?
首先我們先來假設情境:

1.你的網頁寬度是1000像素,一排放五個選單可以除盡為200px,但突然有天老闆又臨時要加兩個上去,1000/7是沒辦法除盡的,只能抓剛剛好的距離,但最右邊始終會有多餘的留白而覺得不好看
2.當網頁寬度改變以後,每個區塊元素又必須重新去計算,時常必須拿出計算機計算而感到不方便
Sass還有一個很特別的功能,也就是內建擁有加減乘除的語法,
但是,他究竟能支援設計師寫CSS什麼樣的工作呢?
首先我們先來假設情境:

1.你的網頁寬度是1000像素,一排放五個選單可以除盡為200px,但突然有天老闆又臨時要加兩個上去,1000/7是沒辦法除盡的,只能抓剛剛好的距離,但最右邊始終會有多餘的留白而覺得不好看
2.當網頁寬度改變以後,每個區塊元素又必須重新去計算,時常必須拿出計算機計算而感到不方便

我們先直接看Sass範例碼吧

$font-size:16px
.font-big
  font-size: $font-size * 1.2
.font-middle
  font-size: $font-size - 3px
.font-small
  font-size: $font-size / 3

變數大家都已曉得,帶進去後,
就會顯示於下面的結果

.font-big {
  font-size: 19.2px;
}
.font-middle {
  font-size: 13px;
}
.font-small {
  font-size: 5.33333px;
}

從上面的可以看出,
有些數字雖然除不盡,
但Sass可以幫你除到網頁解析度可以容許的範圍,
雖然仍然還有零點零幾的留白,但以我自己實際觀察網頁樣式,
用肉眼是完全沒看出留白的,
除了px單位外,em與%數也可以,
但假使你用px+em與%單位的話,
Sass會顯示出錯的:
如下示範影片(瀏覽模式請用全景+720P):
Yes
1.0分30秒:按Ctrl+Shift+D 就可複製該行到下一行
2.0分40秒:px無法乘em,所以編譯錯握
3.1分20秒:可以在變數裡面做計算

另外再補一個我利用SASS來計算出一個滿版的選單寬度,
使用了fire.app的livereload,儲存檔案瀏覽器就自動更新:
Yes
1.1分19秒:要設定每個li單元的寬度,所以除以li的數量
2.1分30秒:讓a的行內變塊狀所以設成了block,行距和高度一樣就會垂直置中
3.2分25秒:模擬情境,當今天單元多了一個時,將整除的數量多加一,就自動算出寬度

--

相信從上面兩個範例可以看出,
透過全域常用變數的功能,
可以大幅減輕我們的計算版型負擔,
像Sass能夠自動抓取小數點末幾位的功能,
如果是用純CSS寫法,我們還是得動用自己的腦力去計算,
這樣其實是很費時的,
通常有在用Sass的,都會有自己內建的計算庫,
進以提升自己的寫code效率,
目前也有一個名為Susy的Sass程式庫,
方便在做Responsive版型調整時更加地順利。

如果你時常寫純CSS因為計算元素寬度感到頭痛,
那希望Sass的計算功能可提升你想用Sass的誘因嘍^_^


上一篇
30天掌握Sass語法 - (3)如何透過「變數」提升撰寫CSS效率
下一篇
30天掌握Sass語法 - (5)利用Sass「@import」進行CSS檔案模組切割
系列文
30天掌握Sass語法41

2 則留言

0
k236740
iT邦新手 5 級 ‧ 2014-07-31 23:18:34

可惜不支援「em」「%」單位計算

我要留言

立即登入留言