Как я могу использовать эти медиа переменные S CSS?

Question

У меня есть это в моем scss файле:

$min-phone: 320px;

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

и я пытался использовать его следующим образом

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

Но это не удается при компиляции css. Что я делаю не так?

Answer 1

Из вашего кода вам нужно извлечь переменную, как вы делали для другого: #{$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}.";
  }
}