更少的媒体查询属性的变量插值 - 缺少结束“）”

Question

我正在尝试 "translate" 一个 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} 结束括号但是根据文档和互联网上的几篇博客文章，似乎从 1.6.0 版本开始，css 属性插值是一项应该有效的功能。

有没有人知道这里可能出了什么问题？实际上可以在媒体查询中将变量用作属性吗？

也许我做的完全错了，但 less 中的 mixins guard feature 似乎与 SASS 和 @if 条件不完全一样，所以 "translation" 是有点不同。

提前致谢

塞巴斯蒂安

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，所以应该是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; } );
}

更少的媒体查询属性的变量插值 - 缺少结束“）”

Variable interpolation for a media query property in less - missing closing ")"

css

less

media-queries

更少的媒体查询 属性 的变量插值 - 缺少结束“）”

Variable interpolation for a media query property in less - missing closing ")"

css

less

media-queries

更少的媒体查询属性的变量插值 - 缺少结束“）”