Медиа-запросы с помощью миксинов Sass и карт

Привет! Сегодня вы узнаете, как использовать медиа-запросы с Sass-миксинами и картами. В курсе 3 этапа, каждый из которых посвящен различным подходам и концепциям.

Надеюсь, вам понравится!

Этап I

Давайте начнем с миксина, а затем мы сможем погрузиться в более сложные концепции с картами.

Сначала создайте миксин, который не принимает никаких аргументов и возвращает постоянный запрос @media.

_media-query.scss

@mixin mq() {
   @media only screen and (min-width: 50em) {
     @content;
  }
}

Если вы уже опробовали это в основном файле:

style.scss

@use 'media-query' as *;

:root {
  --fs-400: 1rem;

  @include mq() {
    --fs-400: 1.125rem;
  }
}

Скомпилированный CSS должен выглядеть следующим образом:

style.css

:root {
  --fs-400: 1rem;
}

@media only screen and (min-width: 50em) {
  :root {
    --fs-400: 1.125rem;
  }
}

Этап II

Теперь пришло время сделать его динамическим, передав параметр внутри карты:

_media-query.scss

@mixin mq($size) {
   @media only screen and (min-width: $size) {
     @content;
  }
}

А в главном файле попробуйте передать аргумент:

style.scss

@use 'media-query' as *;

:root {
  --fs-400: 1rem;

  @include mq(50em) {
    --fs-400: 1.125rem;
  }
}

Результат должен выглядеть так же.

Третья стадия

Однако все еще можно сделать его более динамичным.

Теперь вы можете добавить карту и использовать ее с нашим миксином. Карты эквивалентны объектам в JavaScript или словарям в Python. Сначала установите несколько точек останова внутри карты:

_media-query.scss

$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

Использование карты гарантирует, что вы можете использовать ключи только внутри карты, что предотвращает разброс мнимых чисел и делает ваш код более надежным.

Теперь, чтобы получить значение внутри карты, вы можете использовать функцию map-get(), которая принимает 2 аргумента, объявленную вами карту и ключ внутри этой карты. И она возвращает значение, привязанное к ключу. Теперь, используя эту концепцию…:

_media-query.scss

$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

В основном файле используйте ключ из карты $breakpoints в качестве аргумента внутри вашего миксина mq():

style.scss

@use 'media-query' as *;

:root {
  --fs-400: 1rem;

  @include mq('md') {
    --fs-400: 1.125rem;
  }
}

Примечание: вы можете заключать или не заключать аргумент в кавычки внутри функции mq() в соответствии с вашими предпочтениями. Мне нравится заключать его в кавычки:).

Скомпилированный файл CSS:

style.css

:root {
  --fs-400: 1rem;
}

@media only screen and (min-width: 50em) {
  :root {
    --fs-400: 1.125rem;
  }
}

Также, в качестве бонуса, вы можете улучшить проверку медиа-запроса, включив в него правила @if и @else:

_media-query.scss

$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @if ($size) {
    @media only screen and (min-width: $size) {
      @content;
    }
  } @else {
    @error '`#{$key}` does not exist in the $breakpoints';
  }
}

Это просто гарантирует, что вы можете использовать ключи только внутри точек останова. В противном случае выдается ошибка.

Вы можете получить код из репозитория GitHub.

Если вам понравилась эта статья, пожалуйста, поделитесь с другими. Для меня это очень важно.

Вот и все! Надеюсь, вам понравилось!