如何把 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;
 });
}