Стиль плитки с Sass

Поскольку адаптивный веб-дизайн стал новым нормой, многие дизайнеры, разработчики и агентства осознали, что статичные компы больше не являются ценным способом показать клиентам их сайты. Как говорит Стивен Хей:

«Мы не разрабатываем страницы, мы разрабатываем системы компонентов».

Эти компоненты перекомпоновываются и изменяют размеры в контейнерах разных размеров по мере изменения области просмотра и смещения макетов. Вместо того, чтобы тратить недели на создание статических композиций из 3-4 разных размеров экрана для одного дизайна сайта (и рискуя отказать клиенту во всей этой работе), многие дизайнеры обращаются к «стилевым плиткам», чтобы помочь клиентам понять и утвердить направление дизайна, не создавая полностью подробные комп. Плитки стилей предназначены для «предоставления клиентам выбора интерфейса без необходимости вкладывать средства в несколько макетов фотошопа». Иногда их называют коллажами элементов или картами пользовательского интерфейса .

Развитие руководств по стилю прекрасно согласуется с еще одной недавней разработкой фронт-энда: начинать прототипирование в браузере как можно раньше. Когда мы помогаем клиентам понять дизайн, объединяя руководства по стилю и переводя этот процесс в разметку и из программного обеспечения для дизайна, мы в конечном итоге создаем живые веб-версии руководящих документов для бренда PDF, которыми пользуются многие клиенты.

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

Цветовая палитра

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

<ul class="color-palette">
  <li class="color-blue">
    <span class="swatch"></span>
    Blue
  </li>
  <li class="color-red">
    <span class="swatch"></span>
    Red
  </li>
  <li class="color-green">
    <span class="swatch"></span>
    Green
  </li>
  <li class="color-gray">
    <span class="swatch"></span>
    Gray
  </li>
  <li class="color-dark-gray">
    <span class="swatch"></span>
    Dark Gray
  </li>
</ul>

Это может быть не идеальная разметка (вы могли бы определенно использовать ::beforespan.swatch

После того, как вы это сделаете, вам понадобится CSS для разметки этих образцов цвета для вашего клиента. Мы можем использовать Sass, чтобы сделать это проще. Карты Sass — отличный способ сохранить эти значения цвета:

 $colors: (
  blue: #2980b9,
  red: #e74c3c,
  green: #27ae60,
  gray: #95a5a6,
  dark-gray: #2c3e50
);

Сохраняя эти значения в карте (вместо 5 или более переменных), мы теперь можем циклически просматривать их и генерировать CSS автоматически.

 // just a little layout style to make square swatches
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  width: 15%;
  margin: 1%;
  padding: .5em;
  box-shadow: 0 1px 4px -1px rgba(0,0,0,.5);
}

.swatch {
  display: block;
  height: 0;
  margin-bottom: .5em;
  padding: 100% 0 0;
}

// now, assign each .swatch the right background-color
@each $name, $value in $colors {
  .color-#{$name} {
    .swatch {
      background-color: $value;
    }
  }
}

Заголовки

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

 $sans: Open Sans, Tahoma, sans-serif;
$serif: Droid Serif, Palatino, serif;

$headings: (
  h1: bold 2em/1.2 $sans,
  h2: light 1.5em/1.2 $sans,
  h3: bold 1.2em/1.2 $sans,
  h4: bold 1em/1.2 $sans,
  h5: bold 1em/1.2 $serif,
  h6: italic 1em/1.2 $serif
);

@each $element, $font-property in $headings {
  #{$element} {
    font: $font-property;
  }
}

Это нормально, если вы не стали более сложными со своими стилями заголовков. Если вы планируете добавить такие свойства, как colorletter-spacingtext-transform

 $headings-complex: (
  h1: (
    font: bold 2em/1.2 $sans,
    color: map-get($colors, blue)
  ),
  h2: (
    font: 200 1.5em/1.2 $sans,
    letter-spacing: .1em,
    text-transform: uppercase,
    color: map-get($colors, dark-gray)
  ),
  h3: (
    font: bold 1.2em/1.2 $sans,
    color: map-get($colors, dark-gray)
  ),
  h4: (
    font: normal 1em/1.2 $sans,
    letter-spacing: .1em,
    text-transform: uppercase,
    color: map-get($colors, dark-gray)
  ),
  h5: (
    font: bold 1em/1.2 $serif,
    color: map-get($colors, blue)
  ),
  h6: (
    font: italic 1em/1.2 $serif,
    color: map-get($colors, dark-gray)
  )
);

@each $element, $style-map in $headings-complex {
  #{$element} {
    @each $property, $value in $style-map {
      #{$property}: $value;
    }
  }
}

В этот момент вы можете спросить: «Почему бы просто не написать все эти вложенные данные карты в CSS? Это похоже на CSS, и я не особо экономлю много времени, превращая его в цикл ». Отличная вещь в использовании Sass для упрощения: если метод не облегчает вам задачу, не используйте его. Но если эта сложная карта работает для вашего проекта, сделайте это!

Кнопки

Возвращаясь к более простому использованию карт Sass, кнопки — еще одна хорошая возможность автоматизировать стиль стилей:

 @mixin button($color) {
  display: inline-block;
  background-color: $color;
  color: white;
  border-radius: .25em;
  line-height: 1;
  text-transform: uppercase;
  padding: .5em 1em;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  box-shadow:
  inset 0 .125em .5em rgba(255,255,255,.25),
  inset 0 -.125em .5em rgba(0,0,0,.25);

  &:hover {
    background-color: darken($color, 5%);
  }
}

@each $name, $value in $colors {
  .button-#{$name} {
    @include button($value);
  }
}

Этот фрагмент создаст CSS для кнопок, основанных на тех же цветах, что и палитра выше. Если у вас есть другой набор цветов для кнопок пользовательского интерфейса, вы можете использовать другую карту для $button-colors

Вот CodePen всего кода в этой статье: