Question

我正在尝试将sass函数“转换”为较少的函数。这是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;
            }
        }

    }
}

这是我开始制作的函数，因为似乎每个声明都不能像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属性插值是一个功能，应该管用。

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

也许我完全错了，但似乎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不支持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; } );
}

媒体查询属性的可变插值少 - 缺少关闭“）”

1 个答案: