具有变量和内容的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

实际上,您可以使用@ seven-phases-max已经提到的将传递规则集传递给Mixins.

对于你在Less中的断点(熊类型)

您可以使用模式匹配:

.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%;});
}

或者混合守卫:

.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%;});
}