css - 带有变量和内容的 LESS Mixin

Question

所以在 sass 中，mixin 可以做到:

@mixin bp($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 600px)  { @content; }
  }
}

并且可以用作:

.img {
  width: 33.33%;
  @include bp(baby-bear) {
    width: 100%;
  }
}

LESS 中是否有类似的方式来动态生成 css？特别是传递像 @content 这样的样式块在这里。

Answer 1

确实可以使用 Passing Rulesets to Mixins正如@seven-phases-max 已经提到的。

对于 Less 中的断点(熊型)

您可以使用 pattern-matching :

.bp(papa-bear,@rules) {
@media (max-width: 1200px) {@rules();}
}
.bp(mama-bear,@rules) {
@media (max-width: 800px) {@rules();}
}
.bp(baby-bear,@rules) {
@media (max-width: 600px) {@rules();}
}

.img {
  width: 33.33%;
  .bp(baby-bear; { width: 100%;});
}

或 mixin guards :

.bp2(@point,@rules) {
& when(@point = baby-bear) {
    @media (max-width: 600px) {@rules();}
}
& when(@point = mama-bear) {
    @media (max-width: 800px) {@rules();}
}
& when(@point = papa-bear) {
    @media (max-width: 1200px) {@rules();}
}
}

.img {
  width: 33.33%;
  .bp2(baby-bear; { width: 100%;});
}

在您的示例中，您还可以编写一个 mixin:

.bp3(@point,@rules) {
  @query: ~"(max-width: @{point})";
  @media @query {@rules();}
}

.img {
  width: 33.33%;
  .bp3(600px; { width: 100%;});
}

或者当你必须重用你的熊类型时:

@baby-bear-max-width: 600px;
@mama-bear-max-width: 800px;
@mama-bear-max-width: 1200px;

.bp4(@bear,@rules) {
  @query: ~"(max-width: @{@{bear}-max-width})";
  @media @query {@rules();}
}

.img {
  width: 33.33%;
  .bp4(baby-bear; { width: 100%;});
}