如何把 sass 的 mixin 和 if 改寫成 less

antd 使用的 css 預編是 less,之前在其他專案都是寫 scss,想要把之前寫的工具例如響應式的 mixin 等等搬過來用,這樣就必須改寫成 less 的寫法。

先看看之前的 scss 工具

// rwd斷點
@mixin rwd($point) {
  @if $point == xs {
    @media (max-width: 375px) {
      @content;
    }
  }
  @if $point == sm {
    @media (max-width: 568px) {
      @content;
    }
  }
  @if $point == pad {
    @media (max-width: 768px) {
      @content;
    }
  }
  @if $point == md {
    @media (max-width: 1024px) {
      @content;
    }
  }
  @if $point == lg {
    @media (max-width: 1200px) {
      @content;
    }
  }
  @if $point == llg {
    @media (max-width: 1540px) {
      @content;
    }
  }
}

首先要先了解 less 的 mixin 要怎麼寫。

.rwd(@point) when (@point = xs){
  @media (max-width: 375px) {
    color: #fff;
  }
}

mixin開頭用.來代表,跟 class name 很像,但是只要你後面加上小括號,就代表是mixin的方式。

並且可以在小括號裡面傳進去參數,在 less 中參數要用@開頭代表。

等號只要寫一個,字串可以不用加雙引號。

 

使用的方式也很簡單,就是加上小括號。

p {
  .rwd(xs);
}

目前為止,這個p就會在手機螢幕上變成白色的。


然後因為 less 的if基本上就等於是when的那個功能,所以if這件事就可以省略了。

我們還希望在呼叫這個mixin的時候,裡面的樣式想要自己寫,不是寫死的顏色或是其他屬性,所以要再新增一個參數@content帶進去。

// rwd斷點
.rwd (@point;@content) {
  & when (@point = xs) {
    @media (max-width: 375px) {
      @content();
    }
  }
  & when (@point = sm) {
    @media (max-width: 568px) {
      @content();
    }
  }
  & when (@point = pad) {
    @media (max-width: 768px) {
      @content();
    }
  }
  & when (@point = md) {
    @media (max-width: 1024px) {
      @content();
    }
  }
  & when (@point = lg) {
    @media (max-width: 1200px) {
      @content();
    }
  }
  & when (@point = llg) {
    @media (max-width: 1540px) {
      @content();
    }
  }
}

如何使用

p {
 .rwd(xs;{
    color: #fff;
 });
}

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。