您可以使用 LESS mixins 创建自定义断点吗？

Posted 2023-03-06

【中文标题】您可以使用 LESS mixins 创建自定义断点吗？

【英文标题】：Can you create custom breakpoints with 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，这样我就可以不再被提醒我在工作中错过了什么。

【参考方案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 
  ...