我怎样才能使用这个 SCSS 媒体变量？

Question

我的 scss 文件中有这个：

$min-phone: 320px;

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

并试过像这样使用它

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

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

Answer 1

您可以创建 @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}.";
  }
}

Answer 2

您需要从您的代码中检索 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;
  }
}

我怎样才能使用这个 SCSS 媒体变量？

How can I make use of this SCSS media variables?

html

javascript

css

sass

node-sass