Css 减少与变量和内容的混合

因此，在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

在这里所做的那样。

确实可以使用@seven-phases-max已经提到的样式

对于您的断点（熊型），请在

您可以使用：

或：

在您的示例中，您还可以编写一个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%;});
}

---

看。@max七个阶段谢谢@allejo Less试图尽可能接近CSS的声明性本质。因此，使用防护装置代替更常见的if/else。同样，较少使用延迟加载（并且变量的最后一次声明获胜），这一独特的特性使其更适合在许多情况下用于框架。一个例子可以在

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