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

經過前兩篇的洗禮，應該可以直接用LESS 來撰寫整個網站的CSS 了，不過如果要針對大型的專案，在樣式的規劃上可能就要用到更進階的設定，第三篇的LESS 文章將會介紹一些 ... ARCHIVE ABOUT CONTACT Designthinkingiseverywhere 用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)); [email protected]{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:199px81px; } 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; } BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO