我如何利用这个 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

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

  }

}

Answer 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}.";

  }

}