用 LESS 寫 CSS ( 判斷式、迴圈、Function )
經過前兩篇的洗禮,應該可以直接用 LESS 來撰寫整個網站的 CSS 了,不過如果要針對大型的專案,在樣式的規劃上可能就要用到更進階的設定,第三篇的 LESS 文章將會介紹一些進階的功能,總而言之,其實 LESS 和 SASS 的功能都大同小異,我自己也是寫過 SASS 又轉戰 LESS,不過 LESS 真是滿簡便好用的,提供給大家參考。
判斷式
LESS 的判斷式使用if
和when
,如果有多個判斷就要寫多個判斷式,以下面的例子來說,第一段表示如果變數大於 0,就顯示變數數值,第二個判斷式就是小於等於 0 的話就顯示border:30px;
。
LESS
.if (@aif) when (@aif > 0) { border:@aif; } .if (@aif) when (default()) { border:30px; } .ifmixin1{ .if(-20px); } .ifmixin1{ .if(20px); }
CSS
.ifmixin1 { border: 30px; } .ifmixin1 { border: 20px; }
迴圈
迴圈就是我們常見的 for 迴圈,不過在 LESS 裡型態比較不同,是用when
來表現,最外層的when
是針對這個迴圈下一個停止點,以下面的例子來說就是@counter > 0
,而每進行一次迴圈@counter
就會少 1 直到 0 為止,然後迴圈跑出來的內容就是跟著後面表現。
LESS
.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); width: (10px * @counter); } .loopdiv { .loop(5); } .loop2(@counter) when (@counter > 0) { .loop2((@counter - 1)); .loop-@{counter}-div{ width: (10px * @counter); } } .loop2(5);
CSS
.loopdiv { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; } .loop-1-div { width: 10px; } .loop-2-div { width: 20px; } .loop-3-div { width: 30px; } .loop-4-div { width: 40px; } .loop-5-div { width: 50px; }
function - 獲取圖片尺寸
透過image-width
、image-height
和image-size
,我們可以直接獲取圖片的長寬尺寸
LESS
.img1{ width:image-width("../img/less-logo.png"); height:image-height("../img/less-logo.png"); margin:image-size("../img/less-logo.png"); }
CSS
.img1 { width: 199px; height: 81px; margin: 199px 81px; }
function - 單位轉換
其實我也不知道為什麼要有單位轉換的功能,可能還是會擔心有些人分不清楚各種單位吧,單位轉換只要使用convert
就可以,可以轉換的長度單位有:m、cm、mm、in、pt、和 pc,時間單位有:s 和 ms,角度單位有:rad、deg、grad 和 turn。
LESS
.img2{ width:convert(9s, "ms"); height:convert(14cm, mm); margin:convert(8, mm); }
CSS
.img2 { width: 9000ms; height: 140mm; margin: 8; }
function - 陣列
如果要共用的變數有很多又不想一個個寫,我們可以用一個陣列來表示,不過和一般陣列第一個順序是 0 不同,LESS 的陣列是從 1 開始的。
LESS
@list: red, blue, green, yellow; .list{ color:extract(@list, 1); border-color:extract(@list, 2); background-volor:extract(@list, 3); }
CSS
.list { color: red; border-color: blue; background-volor: green; }
function - 數學計算
這裏我們可以用一些數學式來計算,不過也不是很實用,畢竟真正需要運算,都會用 JS 或其他方式來代替才比較正統一點 ( 因為通常會用到計算都是動態計算,CSS 除了百分比和 calc 之外,基本上都只能算是靜態的數值而已 )。
LESS
.math{ width:sqrt(25cm); width:abs(-18.6%); width:sin(1deg); width:pow(25, -2); width:max(5, 10); width:min(5, 10); width:percentage(0.5); width:round(1.67); width:round(1.67, 1); }
CSS
.math { width: 5cm; width: 18.6%; width: 0.01745241; width: 0.0016; width: 10; width: 5; width: 50%; width: 2; width: 1.7; }
function - 色彩轉換
這是在設計大型專案上一定要會使用的,舉例來說,今天如果設定了一組標準色,在沒有 class 或 id 的輔助下,如果需要一次修改所有的顏色 ( 例如老闆說:請幫我把所有的某某字從藍色換成紅色 ),大概就會瘋掉了,但是 LESS 就是要來解決這個麻煩事,我們可以定義好幾組顏色,然後重複使用,如此一來當遇到要修改,只要改一次顏色即可。
LESS
/* 色彩轉換 */ .color{ color:rgb(90, 23, 148); } /* 顏色調整-飽和度 */ .color-saturate{ color:saturate(#cc8888, 10%); color:saturate(#cc8888, -10%); } /* 顏色調整-不飽和度 */ .color-desaturate{ color:desaturate(#cc8888, 10%); color:desaturate(#cc8888, -10%); } /* 顏色調整-變亮 */ .color-lighten{ color:lighten(#cc8888, 10%); color:lighten(#cc8888, -10%); } /* 顏色調整-變暗 */ .color-darken{ color:darken(#cc8888, 10%); color:darken(#cc8888, -10%); } /* 顏色調整-灰階 */ .color-darken{ color:greyscale(#cc8888); } /* 顏色混合 */ .color-mix{ color:mix(#f00, #00f, 50%); color:mix(#f00, #00f, 20%); color:mix(#f00, #00f, 80%); }
CSS
/* 色彩轉換 */ .color { color: #5a1794; } /* 顏色調整-飽和度 */ .color-saturate { color: #d58080; color: #c49191; } /* 顏色調整-不飽和度 */ .color-desaturate { color: #c49191; color: #d58080; } /* 顏色調整-變亮 */ .color-lighten { color: #dbacac; color: #bd6464; } /* 顏色調整-變暗 */ .color-darken { color: #bd6464; color: #dbacac; } /* 顏色調整-灰階 */ .color-darken { color: #aaaaaa; } /* 顏色混合 */ .color-mix { color: #800080; color: #3300cc; color: #cc0033; }