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

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

判斷式

LESS 的判斷式使用ifwhen,如果有多個判斷就要寫多個判斷式,以下面的例子來說,第一段表示如果變數大於 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-widthimage-heightimage-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;
      }