将 LESS Mixin 转换为 Stylus Mixin

Question

我有以下 Less Mixin 可以帮助我做出响应性的东西：

.mobile-first(@minWidth, @rulesSet) {
    @media only screen and (min-width: @minWidth) {
        @rulesSet();
    }
}

我想将其转换为 Stylus Mixin，我有这段代码，但它不起作用：

.mobile-first($minWidth, $rulesSet) 
    @media only screen and (min-width: $minWidth) 
        $rulesSet();

我是这样使用的：

body
    font-family Helvetica, Arial, sans-serif
    font-size 100%
    line-height 1.5em
    color #2a2a2a
    -webkit-font-smoothing antialiased
    .min-width(1200px
        background-color pink

希望大家能帮帮我。

问候！

Answer 1

你需要在这里使用块混合。像这样：

// This mixin accepts any block of code if called with + sign.
// The provided block is stored in "block" variable
// and expanded if used inside an interpolation ({}).
mobile-first($minWidth)
  @media only screen and (min-width: $minWidth)
    {block}

body
  font-family Helvetica, Arial, sans-serif
  font-size 100%
  line-height 1.5em
  color #2a2a2a
  -webkit-font-smoothing antialiased
  // calling it with a block
  +mobile-first(1200px)
    background-color pink

将 LESS Mixin 转换为 Stylus Mixin

Transform LESS Mixin into Stylus Mixin

css

stylus

mixins

less