Расширенный CSS: использование Sass Maps для компонентов пользовательского интерфейса
HTML&CSS

Расширенный CSS: использование Sass Maps для компонентов пользовательского интерфейса

Оригинал: Advanced CSS: Sass Maps to UI Components, Ria N. Carmin

Sass — это отличный и очень популярный CSS-препроцессор. Если вы не знакомы с ним, взгляните на эти уроки.

Ассоциативные массивы (Maps) являются чрезвычайно недооцененной особенностью Sass. Они помогают автоматизировать создание элементов пользовательского интерфейса и улучшить архитектуру всего приложения. Вам пригодятся ассоциативные массивы, когда понадобится набор классов-модификаторов для элементов пользовательского интерфейса.

Модификатор — это класс, модифицирующий стиль блока в зависимости от контекста. Блок — это универсальный родительский класс, который может использоваться сам по себе.

BEM (Block Element Modifier)

Я обобщила несколько фрагментов кода и шаблоны, которые я часто использую. Хотя, конечно, надо уметь применять эту технику и к другим элементам интерфейса.

Синтаксис ассоциативных массивов Sass


$map: (
key-1: value-1,
key-2: value-2,
key-3: value-3
);

Получить значение по ключу можно так:


map-get($map, key)

Настройка

У вас, вероятно, есть Sass-файл, в котором вы объявляете все переменные (что-то вроде _variables.scss или _base.scss). Если нет, вы должны его создать. Здесь же мы опишем и наши мэпы.

После нескольких попыток и ошибок я поняла, что лучший способ настроить ассоциативные массивы — сначала объявить переменные, а затем создать Map с этими переменными. Такой способ позволяет использовать простые переменные в коде (например, $color-robin) вместо получения значения с помощью map-get (например, map-get($ui-colors, primary)).


// UI Colors
$color-robin    : #8FCCCC;
$color-vista    : #79D1AD;
$color-mandy    : #e67478;
$color-apricot  : #ed8864;
$color-eastside : #9279c3;

// UI Colors Map
$ui-colors: (
 default        : $color-robin ,
 success        : $color-vista,
 error          : $color-mandy,
 warning        : $color-apricot,
 info           : $color-eastside
);

Я обычно объявляю 4 мэпа:

  • Цвета темы (цвета фирменного стиля)
  • Цвета элементов интерфейса (цвета для ошибок, всплывающих подсказок, кнопок)
  • Оттенки серого (цвета для текста, теней, фонов)
  • Фирменные цвета (используется, например, для иконок социальных сетей)

Такой же шаблон будет применяться для типографики. Вы можете сначала объявить отдельные переменные для шрифтов, а затем положить их в массив.

Какие переменные стоит использовать в ассоциативном массиве? Переменные, которые вы будете использовать в миксинах для создания классов модификаторов. За исключением очевидного — выбора цвета — ассоциативные массивы можно использовать для типографики, иконок или изображений. В следующем примере я покажу, как создать различные классы для кнопок, используя карту цветов UI Colors.

Кнопки

Я использую директиву each, которая проходится циклом по массиву $ui-colors и создает класс-модификатор для базового класса .button. Мы получаем модификаторы для стилизации кнопок как ‘error’ или ‘success’.


.button {
// общие стили для всех кнопок
// …
// генерирует классы модификаторов
 &--#{$theme} {
   background-color: $color;
   color: transparentize($white, .2);
 }
 &--#{$theme}:hover,
 &--#{$theme}:focus {
   background-color: shade($color, 20%);
   color: $white;
 }
}
// Использование:
// .button .button--default
// .button .button--success
// .button .button--error
// .button .button--warning
// .button .button--info

Такой подход избавляет от необходимости дублирования кода. А также, если вы захотите изменить какой-то цвет в цветовой схеме или добавить новые цвета — все элементы интерфейса обновятся автоматически.

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

Иконки социальных сетей

Я использовала тот же шаблон, что и в прошлом примере, но на этот раз добавила иконки социальных сетей. Код ниже создает класс блока social-media-icon и модификаторы для различных иконок.


// Colors
$color-facebook  : #3B5998;
$color-twitter   : #55ACEE;
$color-pinterest : #CC2127;
$color-youtube   : #E52D27;

$social-media-icons: (
 facebook        : $icon-facebook,
 twitter         : $icon-twitter,
 pinterest       : $icon-pinterest,
 youtube         : $icon-youtube
)

// Icons
$icon-facebook   : url(‘assets/facebook.png’);
$icon-twitter    : url(‘assets/twitter.png’);
$icon-pinterest  : url(‘assets/pinterest.png’);
$icon-youtube    : url(‘assets/youtube.png’);

$social-media-colors: (
 facebook        : $color-facebook,
 twitter         : $color-twitter,
 pinterest       : $color-pinterest,
 youtube         : $color-youtube
)
.social-media-icon {
   border-radius: 50%;
   padding: .5rem;
   text-align: center;
   background-size: cover;
   background-repeat: no-repeat;
   @each $theme, $color in $social-media-colors {
     &--#{$theme} {
       background-color: $color;
     }
   }
   @each $theme, $icon in $social-media-icons {
     &--#{$theme} {
       background-attachment: $icon;
     }
   }
}
// Использование:
// .social-media-icon .social-media-icon--facebook
// .social-media-icon .social-media-icon--twitter
// .social-media-icon .social-media-icon--pinterest
// .social-media-icon .social-media-icon--youtube

Заключение

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

Ассоциативные массивы хорошо подходят для организации цветов, типографики, иконок или изображений.

Использование ассоциативных массивов помогает сохранять единый дизайн в определенном контексте (например, все сообщения об ошибках красные).

Одним блоком кода можно создать множество классов-модификаторов, что избавляет от необходимости дублировать код.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться