用 LESS 寫 CSS ( 判斷式、迴圈、Function )

經過前兩篇的洗禮,應該可以直接用 LESS 來撰寫整個網站的 CSS 了,不過如果要針對大型的專案,在樣式的規劃上可能就要用到更進階的設定,第三篇的 LESS 文章將會介紹一些進階的功能,總而言之,其實 LESS 和 SASS 的功能都大同小異,我自己也是寫過 SASS 又轉戰 LESS,不過 LESS 真是滿簡便好用的,提供給大家參考。

判斷式

LESS 的判斷式使用ifwhen,如果有多個判斷就要寫多個判斷式,以下面的例子來說,第一段表示如果變數大於 0,就顯示變數數值,第二個判斷式就是小於等於 0 的話就顯示border:30px;


迴圈

迴圈就是我們常見的 for 迴圈,不過在 LESS 裡型態比較不同,是用when來表現,最外層的when是針對這個迴圈下一個停止點,以下面的例子來說就是@counter > 0,而每進行一次迴圈@counter就會少 1 直到 0 為止,然後迴圈跑出來的內容就是跟著後面表現。


function - 獲取圖片尺寸

透過image-widthimage-heightimage-size,我們可以直接獲取圖片的長寬尺寸


function - 單位轉換

其實我也不知道為什麼要有單位轉換的功能,可能還是會擔心有些人分不清楚各種單位吧,單位轉換只要使用convert就可以,可以轉換的長度單位有:m、cm、mm、in、pt、和 pc,時間單位有:s 和 ms,角度單位有:rad、deg、grad 和 turn。


function - 陣列

如果要共用的變數有很多又不想一個個寫,我們可以用一個陣列來表示,不過和一般陣列第一個順序是 0 不同,LESS 的陣列是從 1 開始的。


function - 數學計算

這裏我們可以用一些數學式來計算,不過也不是很實用,畢竟真正需要運算,都會用 JS 或其他方式來代替才比較正統一點 ( 因為通常會用到計算都是動態計算,CSS 除了百分比和 calc 之外,基本上都只能算是靜態的數值而已 )。


function - 色彩轉換

這是在設計大型專案上一定要會使用的,舉例來說,今天如果設定了一組標準色,在沒有 class 或 id 的輔助下,如果需要一次修改所有的顏色 ( 例如老闆說:請幫我把所有的某某字從藍色換成紅色 ),大概就會瘋掉了,但是 LESS 就是要來解決這個麻煩事,我們可以定義好幾組顏色,然後重複使用,如此一來當遇到要修改,只要改一次顏色即可。