现在类似于SASS

Question

大多数情况下，我使用带有预设断点的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

}

在很少的情况下，我想象等效的mixin看起来像这样：

.bp-min(@min) {

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

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

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

Answer 1

现在类似于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作为参数
调用函数时的附加括号
＆＃39;＆＃39;语法而不是＆＃39; @include＆＃39;

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

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

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

编辑：说实话，我更喜欢更简单的方法：

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

资料来源：我也在家里使用sass而不是工作

Answer 2

使用模式匹配

我相信这可以达到你想要的效果：

<强> LESS

/* 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中使用该模式，我相信我们在SCSS中具有相同的抽象，略有抽象更多代码因为我相信SCSS在一个@include语句中定义和调用，而在这里我们需要两个。

Answer 3

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

.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替换为.-。

Answer 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 {
  ...
}

你能用LESS mixins创建自定义断点吗？

4 个答案:

现在类似于SASS

使用模式匹配