如何使用这个 SCSS 媒体变量？答案

【问题标题】：How can I make use of this SCSS media variables?如何使用这个 SCSS 媒体变量？
【发布时间】：2020-06-20 14:39:48
【问题描述】：

我的scss 文件中有这个：

$min-phone: 320px;

$retina-phone: #{"only screen and (min-width: #{$min-phone})"};

并尝试过像这样使用它

p {
  @media $retina-phone {
    font-size: 12;
  }
}

但是在编译 css 时它失败了。我做错了什么？

【问题讨论】：

标签： javascript html css sass node-sass

【解决方案1】：

从您的代码中，您需要像为另一个代码一样检索 var：#{$retina-phone}

原来是这样：

$min-phone: 320px;

$retina-phone: #{"only screen and (min-width: #{$min-phone})"};

p {
  @media #{$retina-phone} {
    font-size: 12;
  }
}

它会编译成

@media only screen and (min-width: 320px) {
  p {
    font-size: 12;
  }
}

【讨论】：

【解决方案2】：

你可以创建@mixin：

@mixin respond-below($breakpoint) {
  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {
    // Get the breakpoint value.
    $breakpoint-value: map-get(
      $breakpoints,
      $breakpoint
    ); // Write the media query.
    @media (max-width: ($breakpoint-value - 1)) {
      @content;
    }
    // If the breakpoint doesn't exist in the map.
  } @else {
    // Log a warning.
    @warn "Invalid breakpoint: #{$breakpoint}.";
  }
}

【讨论】：