Как в Sass создать правило медиа-запроса с использованием переменной?

Как можно вынести медиа-запрос в переменную, чтобы использовать его в свойстве CSS?
  • 16 октября 2023 г. 8:48
Ответы на вопрос 2
Для создания медиа-запроса с использованием переменной в Sass, вы можете использовать функцию `@media`, а затем передать значение переменной в качестве аргумента. 

Пример:

```scss
$breakpoint: 768px;

@media (max-width: $breakpoint) {
  // ваше оформление для мобильных устройств
}
```

Таким образом, вы создаете медиа-запрос с максимальной шириной экрана, равной значению переменной `$breakpoint`.

Если вы хотите вынести медиа-запрос в переменную для использования его в свойстве CSS, то вы можете определить переменную с селектором медиа-запроса, а затем использовать эту переменную в свойстве `@media`. 

Пример:

```scss
$mediaQuery: "@media (max-width: 768px)";

.my-element {
  font-size: 16px;

  #{$mediaQuery} {
    font-size: 12px;
  }
}
```

В этом примере мы определили переменную `$mediaQuery` как строку `"@media (max-width: 768px)"`. Затем мы использовали ее внутри селектора `.my-element` с помощью интерполяции `#{}`. Это позволяет включить содержимое переменной в итоговый CSS без изменений.
@mixin _md {
  @media (min-width: 720px) {
    @content;
  }
}.block {
  color: red;

  @include _md {
    color: blue;
  }
}
Похожие вопросы