Компонент Sass за 10 минут

Сегодня разработчики признают, что, хотя было бы здорово написать свой веб-сайт или код приложения в виде набора небольших частей (т. Е. Компонентов), выполнить это не всегда просто. Итак, давайте посмотрим на эту тему подробно, используя Sass.

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

Создание компонента для работы с различными типами предупреждающих сообщений — идеальный вариант для повышения уровня Sass. Так что засучите рукава, ребята, потому что мы ввязываемся!

Определение наших цветов оповещения

Что мы хотим? Сообщения! Но что за сообщения? Давайте опираться на структуру, которая уже делает что-то вроде этого: Bootstrap. Bootstrap определяет 4 типа предупреждающих сообщений :

• Проверка
• ошибка
• Предупреждение
• Информация

Это звучит хорошо для нашего примера компонента! Подобно тому, как мы используем наш тон голоса в реальной жизни, чтобы выразить различные эмоции, мы можем использовать цвета, чтобы передать сообщение, используя оповещения в Интернете. Отсюда четыре типа оповещений, каждое со своей цветовой схемой. Еще раз, давайте позаимствуем то, что Bootstrap уже сделал, и определим наши цвета оповещений:

• Зеленый для успеха
• Красный за ошибку
• Желтый или оранжевый для предупреждения
• Голубой для информации

Написание наших базовых стилей

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

Как я уже говорил в статье Sass: Mixin или Placeholder? Рекомендуется расширить заполнитель для статических правил и использовать миксин для динамических (то есть тех, которые могут варьироваться в зависимости от переменных, связанных с контекстом).

Давайте начнем с заполнителя:

%message {
  padding: .5em;
  margin-bottom: .5em;
  border-radius: .15em;
  border: 1px solid;
}

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

Мы также не определяем цвет границы. Свойство border-colorcurrentcolorcolor

А теперь миксин:

 @mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}

Как видите, миксин выполняет две функции: во-первых, он устанавливает свойства, связанные с цветом, принимая уникальный цвет в качестве параметра, и создает два варианта цвета, благодаря функции цвета Sass lighten Использование функций манипуляции цветом Sass — отличный способ уменьшить количество аргументов для миксина.

Второе, что делает миксин, — это расширение заполнителя %message И с этим код становится очень сухим ( не повторяйте себя ).

Вызов миксин

Мы почти закончили. Все, что нам осталось, это вызвать mixin для каждого типа сообщения, передав правильное значение цвета для типа сообщения, которое мы хотим:

 .message-error {
  @include message(#b94a48);
}

.message-valid {
  @include message(#468847);
}

.message-warning {
  @include message(#c09853);
}

.message-info {
  @include message(#3a87ad);
}

 $message-types: (
  (error    #b94a48)
  (valid    #468847)
  (warning  #c09853)
  (info     #3a87ad)
) !default;

@each $message-type in $message-types {
  $type:  nth($message-type, 1);
  $color: nth($message-type, 2);

  .message-#{$type} {
    @include message($color);
  }
}

 $message-types: (
  error   :  #b94a48,
  valid   :  #468847,
  warning :  #c09853,
  info    :  #3a87ad
) !default;

@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

 @mixin message($color) {
  @if type-of($color) == color {
    @extend %message;
    color: $color;
    border-color: lighten($color, 20%);
    background: lighten($color, 40%);
  }

  @else {
    @warn "#{$color} is not a color for `message`.";
  }
}