【问题标题】：Can you create custom breakpoints with LESS mixins?您可以使用 LESS mixins 创建自定义断点吗？
【发布时间】：2014-02-15 17:19:36
【问题描述】：

大多数时候，我使用带有预设断点的 LESS 变量来进行媒体查询，如下所示：

@s-max : ~"screen and (max-width: 40em)";
@m-max : ~"screen and (max-width: 50em)";
@l-max : ~"screen and (max-width: 60em)";

USAGE

.some-class {
    color: red;

    @media @s-max {
       color: blue;
    }
}

但有时，我希望能够在我的 .less 样式表中引用任意断点，而不必在我单独的 mixin 文件中设置新的预设值。

您可以在 SASS 中执行此操作。 mixin 看起来像这样：

@mixin bp-min($canvas) {

    @media only screen and (min-width:$canvas) {@content;}
}

USAGE

@include bp-min(750px) {

//responsive styling for min-width of 750px

}

在 LESS 中，我想象等效的 mixin 看起来像这样：

.bp-min(@min) {

    @media only screen and (min-width:@min)...
}

唯一的问题是，LESS 中缺少 {@content} 参数，它获取了开发人员输入的其余样式。我喜欢 SASS，但我不能在工作中使用它。

有人知道这个问题的基于 LESS 的解决方案吗？

【问题讨论】：

这是我从 LESS 迁移到 SCSS 的原因之一。我搬家的时候没有人支持。
搬家还有其他充分的理由。
我知道，我知道。萨斯是一个美丽的东西。我正在考虑（不是很认真）将我的一些个人项目从它转移到 LESS，这样我就可以不再被提醒我在工作中错过了什么。

标签： css less media-queries

【解决方案1】：

使用模式匹配

我相信这可以实现您想要的：

少

/* generic caller */
.bp-min(@min) {
    @media only screen and (min-width:@min) {
      .bp-min(@min, set);
    }
}

/* define them */
.bp-min(750px, set) {
  test: (@min - 300px);
}
.bp-min(400px, set) {
  test: (@min - 100px);
}

/* call them */
.bp-min(750px);
.bp-min(400px);

输出 CSS

@media only screen and (min-width: 750px) {
  test: 450px;
}
@media only screen and (min-width: 400px) {
  test: 300px;
}

通过为各种尺寸定义 set 模式 mixin，然后在通用 .bp-min(@min) mixin 中使用该模式，我相信我们在 LESS 中的抽象与在 SCSS 中的抽象相同，但代码略多一些，因为我相信 SCSS 在一个 @include 语句中定义和调用，而这里我们需要两个。

【讨论】：

有趣的方法。它似乎需要与创建另一个预设媒体查询（使用@variable）大致相同的时间/工作量，但我会更多地考虑这个解决方案，看看我是否可以使用它。谢谢！
它的工作量可能不会少很多，但我想说的关键点是，它与您提供的作为您希望实现的示例的 SCSS 版本几乎没有什么不同。唯一的额外是调用启动进程滚动的调用。
我明白你的意思。只是我懒惰的头脑想要一些像 sass 一样快速、简单和无意识的东西……但看起来你可能已经想出了 LESS 中下一个最好的东西。谢谢。

【解决方案2】：

（除了上一个答案）或类似的东西：

.bp-min(@canvas) {
    @media only screen and 
        (min-width: @canvas) {.content}
}

// usage:

& { .bp-min(900px); .content() {
    color: red;
}}

& { .bp-min(600px); .content() {
    color: blue;
}}

// more usage examples:

.class-green { 
    .bp-min(450px); .content() {
        color: green;
}}

& { .bp-min(300px); .content() {

    .class-yellow {
        color: yellow;
    }

    .class-aqua {
        color: aqua;
    }
}}

如果您喜欢较短的内容，请将 .content 替换为 .-。

【讨论】：

我实际上比第一种方法更喜欢这种方法，因为使用都发生在一个地方/选择器中。感谢分享。

【解决方案3】：

现在类似于 SASS

从 1.7.0 (2014-02-27) 开始，您现在可以使用 @rules 代替时髦的 @content。

例如：

.breakpoint-small(@rules) {
  @media screen and (min-width: 40em) { @rules(); }
}

ul {
  width: 100%;
  .breakpoint-small({
    width: 50%;
  });
}

按预期输出：

ul {
  width: 100%;
  @media screen and (min-width: 40em) {
    width: 50%;
  }
}

区别在于：

函数将@rules 作为参数
调用函数时的附加括号
'.'与“@include”相对的语法

这可以与一个额外的参数结合使用，以提供相当于 sass 的语法：

.breakpoint(@size, @rules) {
  @media screen and (min-width: @size) { @rules(); }
}

@large: 60em;
ul {
  .breakpoint(@large, {
    width: 50%;
  });
}

edit：老实说，我更喜欢在less中更简单的方法：

@break-large: ~"screen and (min-width: 60em)";
ul {
  @media @break-large {
    width: 50%;
  }
}

来源：我在家里也使用 sass，而在工作中使用较少

【讨论】：

到目前为止，你的最后一张看起来很棒

【解决方案4】：

就我而言，我需要我的变量来引用其他变量，因此其中一些解决方案不起作用。这是我的选择。

@bp-xs: ~"screen and (max-width:"@screen-xs-max~")";
@bp-sm: ~"screen and (max-width:"@screen-sm-max~")";
@bp-md: ~"screen and (max-width:"@screen-md-max~")";
@bp-lg: ~"screen and (max-width:"@screen-lg-max~")";

然后像这样使用它们

@media @bp-sm {
  ...
}

【讨论】：