我如何利用这个 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}.";  }}