缺少结束")"中媒体查询属性的变量插值

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属性插值是一个应该有效的功能。

有人知道这里可能出了什么问题吗？是否可以在媒体查询中使用变量作为属性？

也许我做得完全错了，但less中的mixins保护功能似乎与SASS和@if条件不完全一样，所以"翻译"有点不同。

提前感谢

Sébastien

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不像Less中那样支持@content，所以它应该作为一个分离的规则集与mixin调用一起传递。

@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; } );
}