具有变量和内容的LESS Mixin

Question

So in sass, the mixin can do:

@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; }
  }
}

And can be used as:

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

Is there a similar way in LESS to dynamically generate the css? Especially passing a block of stylings like what the @content does here.

Answer 1

Indeed you can use Passing Rulesets to Mixins as already mentioned by @seven-phases-max.

For your break-points (bear types) in Less

You can use 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%;});
}

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

In your example you can also write a single mixin:

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

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

Or when you have to reuse your bear types:

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