css - less 中媒体查询属性的变量插值 - 缺少关闭 ")"

Question

我正在尝试将一个 sass 函数“翻译”成一个 less 函数。这是原始的 SASS:

@mixin bp($feature, $value) {
    // Set global device param
    $media: only screen;

    // Media queries supported
    @if $mq-support == true {

        @media #{$media} and ($feature: $value) {
            @content;
        }

        // Media queries not supported
    } @else {

        @if $feature == 'min-width' {
            @if $value <= $mq-fixed-value {
                @content;
            }
        } @else if $feature == 'max-width' {
            @if $value >= $mq-fixed-value {
                @content;
            }
        }

    }
}

这是我开始用 less 编写的函数，因为似乎每个声明都不能像在 sass 中那样实现:

.bp(@feature; @val) when (@mq-support = true) {
    @med: ~"only screen";

    @media @{med} and (@{feature}:@val) {
        @content;
    }
}

编译时出现如下错误:

Missing closing ')' on line 15, column 34:
15     @media @{med} and (@{feature}:@val) {
16         @content;

所以这个错误似乎是来自@{feature} 右括号，但是根据文档和互联网上的几篇博客文章，似乎从 less 的 1.6.0 版本开始，css 属性插值是一个功能，应该管用。

有没有人知道这里可能出了什么问题？是否真的可以将变量用作媒体查询中的属性？

也许我做的完全错了，但看起来 mixins guard feature in less 与 SASS 和 @if 条件的工作方式并不完全相同，因此“翻译”有点不同。

提前谢谢你

塞巴斯蒂安

Answer 1

在媒体查询中插值或使用变量在 Less 中的工作方式略有不同。

• 首先，您不应该使用普通的插值语法 (@{med})。相反，它应该只是 @med .
• 接下来，第二个条件也应该设置为一个变量，然后像@med一样附加到媒体查询中。变量或者它应该作为 @med 的一部分包含在内变量本身。我在下面给出了两种方法的示例。

.bp(@feature; @val) when (@mq-support = true) {
  @med: ~"only screen and";
  @med2: ~"(@{feature}:@{val})";
  @media @med @med2{
    @content();
  }
}

或

.bp(@feature; @val) when (@mq-support = true) {
  @med: ~"only screen and (@{feature}:@{val})";
  @media @med {
    @content();
  }
}

---

下面是将该 Sass 代码完全转换为其 Less 等效代码的示例。 Less 不支持 @content就像在 Less 中一样，所以它应该是 passed as a detached ruleset with the mixin call .

@mq-support: true;
@mq-fixed-value: 20px;

.bp(@feature; @val; @content) {
  & when (@mq-support = true) {
    @med: ~"only screen and (@{feature}:@{val})";
    @media @med {
      @content();
    }
  }
  & when not (@mq-support = true) {
    & when (@feature = min-width) {
      & when (@val <= @mq-fixed-value){
        @content();
      }
    }
    & when (@feature = max-width) {
      & when (@val >= @mq-fixed-value){
        @content();
      }
    }
  }
}

a{
  .bp(max-width, 100px, { color: red; } );
}
b{
  .bp(min-width, 10px, { color: blue; } );
}