Отзывчивые размеры шрифтов с помощью Sass Maps и @each

Привет! Сегодня вы узнаете, как создать отзывчивые размеры шрифта с помощью Sass maps и метода @each.

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

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

Прежде всего, создайте карту, содержащую размеры шрифтов для двух различных размеров экрана. Назовем их sm и lg, что означает маленький и большой размеры экрана соответственно. Оба должны содержать один и тот же ключ с разными значениями.

Если вы не знаете, что такое Sass map, то это эквивалент объекта в JavaScript или словаря в Python.

_type-scale.scss

$type-scale: (
  sm: (
    300: 0.875rem,
    400: 1rem,
    500: 1.125rem,
    600: 1.375rem,
    700: 2rem,
  ),
  lg: (
    300: 1rem,
    400: 1.125rem,
    500: 1.375rem,
    600: 2rem,
    700: 2.75rem,
  ),
);

Вход в полноэкранный режим Выход из полноэкранного режима

Итак, вы, вероятно, знаете, что одним из хороших способов создания отзывчивых размеров шрифта в CSS являются пользовательские свойства. Причем их значение можно легко изменить. Выглядит это примерно так:

example.css

:root {
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.375rem;
  --fs-700: 2rem;
}

@media only screen and (min-width: 50em) {
  :root {
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 2rem;
    --fs-700: 2.75rem;
  }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Значение пользовательских свойств легко изменить в любой момент. Однако в Sass у нас есть то, что мы называем переменными, значение которых довольно сложно изменить. Тем не менее, мы можем использовать суперспособности Sass, которые помогут нам создать эти пользовательские свойства. Вы можете сказать, какой смысл все усложнять, даже если в конце концов мы получим эти пользовательские свойства. Это правда, но Sass — это как организованная версия CSS и предоставляет возможности, которые делают код более надежным и организованным.

Ладно, давайте вернемся к теме. Наша конечная цель — превратить карту (в _type-scale.scss) в пользовательские свойства (в example.css). Всякий раз, когда вы видите или используете карты Sass, вы, вероятно, видели правило @each. Это потому, что они очень хорошо работают вместе. Вы можете описать их как массивы с помощью функций map() или forEach в JavaScript.

Итак, начните с создания правила @each. Оно будет принимать 3 параметра.

1-й: ключ в карте
2-й: значение в карте
3-й: сама карта

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

Это выглядит примерно так:

each-example.scss

$colors: (
  primary: #06f,
  secondary: #333,
  accent: #f70,
);

@each $key, $value in $colors {
  .text-#{$key} {
    color: $value;
  }
}

Войти в полноэкранный режим Выход из полноэкранного режима

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

each-example.css

.text-primary {
  color: #06f;
}

.text-secondary {
  color: #333;
}

.text-accent {
  color: #f70;
}

Войти в полноэкранный режим Выход из полноэкранного режима

#{$key} — эта странная штука называется интерполяцией. Она используется для вставки значений в строки. Вы можете узнать больше об этом здесь.

Как видите, Sass — это действительно мощный язык. Если мы описываем CSS как JavaScript, то Sass можно рассматривать как React.

Хорошо, надеюсь, вы поняли, как @each и карты отлично работают вместе. Теперь давайте создадим наши отзывчивые размеры шрифта.

Создайте правило @each, которое перебирает карты $type и генерирует следующий вывод:

example.css

:root {
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.375rem;
  --fs-700: 2rem;
}

@media only screen and (min-width: 50em) {
  :root {
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 2rem;
    --fs-700: 2.75rem;
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Вам нужно использовать вложенное правило @each для вложенных карт! Также вам может понадобиться использовать правила @if и @else. Подробнее о них вы можете узнать здесь. Да, в Sass тоже есть операторы if:).

Итак, начните с первого уровня правила @each и посмотрите, что оно выведет.

style.scss

@use 'type-scale' as *;

:root {
  @each $key, $value in $type-scale {
    --#{$key}: $value;
  }
}

Войти в полноэкранный режим Выход из полноэкранного режима

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

style.css

:root {
  --sm: $value;
  --lg: $value;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Всякий раз, когда вы видите, что в CSS возвращается $value, просто интерполируйте его.

style.scss

@use 'type-scale' as *;

:root {
  @each $key, $value in $type-scale {
    --#{$key}: #{$value};
  }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, ни с того ни с сего, вы получите ошибку, говорящую, что это не валидный CSS. Потому что $key возвращает размеры экрана (sm, lg), а $value пытается вернуть другую карту внутри этих ключей. Давайте создадим еще один @each и посмотрим, что он вернет.

Не забывайте, что $value возвращает внутреннюю карту, поэтому второй @each должен быть относительно $value.

style.scss

:root {
  @each $screen-size, $sizes in $type-scale {
    @each $key, $value in $sizes {
      --fs-#{$key}: #{$value};
    }
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Если вы помните, в первом слое @each, $key возвращал размеры экрана (sm, lg), а $value возвращал другую карту, содержащую все размеры каждой клавиши. Итак, я назвал $key как $screen-size и $value как $sizes.

Теперь, в нашем внутреннем правиле @each, мы просим его вернуть ключи и значения внутри этих размеров.

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

style.css

:root {
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.375rem;
  --fs-700: 2rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.375rem;
  --fs-600: 2rem;
  --fs-700: 2.75rem;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Окей, мы достигли цели. Осталось сделать несколько вещей. Теперь нам нужно найти, какой ключ принадлежит размерам экрана sm или lg. И здесь очень пригодятся @if и @else.

Итак, $screen-size возвращает размеры экрана (sm, lg). Если он возвращает sm, просто верните его внутри :root. В противном случае верните его внутри медиа-запроса.

Вам нужно использовать утверждения @if и @else после первого слоя правила @each, а не второго! Если оно удовлетворяет, верните второй слой правила @each, который мы написали выше.

style.scss

@use 'type-scale' as *;

:root {
  @each $screen-size, $sizes in $type-scale {
    @if $screen-size == sm {
      @each $key, $value in $sizes {
        --fs-#{$key}: #{$value};
      }
    } @else {
      @media (min-width: 50em) {
        @each $key, $value in $sizes {
          --fs-#{$key}: #{$value};
        }
      }
    }
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

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

style.css

:root {
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.375rem;
  --fs-700: 2rem;
}

@media (min-width: 50em) {
  :root {
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 2rem;
    --fs-700: 2.75rem;
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Да, мы сделали это! Как вы уже догадались, мы можем добавить больше размеров экрана. И это задача для вас, если вы хотите попробовать.

Если у вас есть какие-либо сомнения, вопросы или отзывы, пожалуйста, поделитесь ими со мной. Я очень ценю это и отвечу вам как можно скорее!

Если вы новичок в картах Sass и методе @each, я настоятельно рекомендую посмотреть видео Кевина Пауэлла, где он объясняет суперспособности Sass с помощью пользовательских свойств и вспомогательных классов. Именно там я тоже научился этим классным вещам:).

Пользовательские свойства и классы утилит от Кевина Пауэлла

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

Вы можете получить исходный код из этого репозитория GitHub

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