Создание адаптивной сетки с Sass

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

Введение

Построение поддерживаемого, адаптивного дизайна часто становится большим обязательством. Многие люди как правило, используют фреймворки, которые в конечном итоге, имеют много лишних функций. Когда я думаю об адаптивном дизайне, я сразу же вспоминаю Sass и три его удивительные особенности - maps, loops, и mixins. Используя эти функции, создание адаптивного дизайна становится очень простым. Не говоря уже, что у вас будет только тот набор функций, который вам нужен. В этом учебном руководстве, мы займемся глубоким изучением Sass maps, loops, и mixins, узнаем насколько они важны и полезны. Мы создадим некоторые многоразовые, поддерживаемые структуры данных и примеси для RWD. В конце, мы создадим собственную систему сеток. Давайте приступим!

Sass Maps & Loops

Sass map является одним из типов данных Sass. Он представляет собой связь между ключами и значениями, как у объектов в JavaScript. Вот пример Sass map, которая отображает названия цветов в кодировке Hex:

$colors: (
  primary: #333,
  secondary: #555,
  brand: #ff0033
);

Получить значение из Sass map так же очень просто:

.logo {
  map-get($colors, brand);
}

Sass map очень хорошо работает в итерационных функциях, таких как @for и @each, которые называются "управляющие директивы". Давайте рассмотрим каждую в действии.

Директива @for многократно выводит набор стилей путем итерации значений от A до B, где А и В являются целыми числами. При каждом повторении, увеличивает счетчик, как и обычный цикл в любом другом языке программирования. Пример его в действии:

@for $i from 1 through 4 {
  .box-#{$i} {
    width: 4rem * $i;
  }
}

Результат в CSS:

.box-1 { width: 4rem; }
.box-2 { width: 8rem; }
.box-3 { width: 12rem; }
.box-4 { width: 16rem; }

Важно отметить синтаксис строки интерполяции приращения селектора .box-. Строка интерполяции необходима при добавлении переменной в строку, она принимает вид #{$variable}. Это позволяет пошагово вывести селектор box от .box-1 до .box-4.

Теперь давайте взглянем на директорию @each, которая производит перебор Sass map. Мы будем использовать предыдущую Sass map в качестве примера. Эта директива многократно производит перебор Sass map, что дает нам доступ к каждому ключу и соответствующему значению на каждом шаге. Вы можете прочесть этот синтаксис что то вроде "для каждого ключа и значения в Sass map, сделать то-то". Пример:

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

Результат в CSS:

.item-primary { color: #333; }
.item-secondary { color: #555; }
.item-brand { color: #ff0033; }

Sass Примеси

Далее, я хотел бы представить директиву mixin (примеси). Примеси что-то вроде функций, которые могут принимать различные значения, пример использования примесей вы можете увидеть на сайте Веб-студии Seora. Примеси выглядят следующим образом:

@mixin paint-red {
  color: #fff;
  background-color: #ff0000;
}

Использование примесей довольно легко, мы просто вызываем селектор @include:

.banner {
  padding: 4rem;
  @include paint-red;
}

Результат в CSS:

.banner {
  padding: 4rem;
  color: #fff;
  background-color: #ff0000;
}

Медиа-запросы Breakpoint в Sass

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

  • Количество breakpoint
  • Размер breakpoint

Каждый раз, когда я начинаю новый проект, первым делом я создаю список breakpoint с их ключами:

$breakpoints: (
  xs: 32rem,
  sm: 48rem,
  md: 72rem,
  lg: 96rem,
  xl: 102rem,
  xx: 120rem
);

Эти значения были выбраны случайным образом, в качестве примера. Вы можете подобрать значения по своему усмотрению! Затем, я добавляю примеси медиа-запросов. Вот что я предпочитаю использовать:

@mixin break($size) {  
  @media (min-width: map-get($breakpoints, $size)) {
    @content;
  }
}

Данная примесь должна быть довольно проста для понимания, но в двух словах, при помощи функции map-get происходит выбор соответствующего значения breakpoint на основе выбранного ключа. Пример:

.el {
  display: none;

  @include break(sm) {
    display: block;
  }
}

Результат в CSS:

.el {
  display: none;
}

@media (min-width: 48rem) {
  .el {
    display: block;
  }
}

Как вы могли заметить, преимущество создания адаптивного дизайна здесь огромное.

Создание адаптивной сетки!

В качестве последнего демо, давайте создадим адаптивную систему сеток, всего в 15 строк Sass кода. Конечно мы будем использовать наши предыдущие breakpoint на примесях медиа запросов. Для начала определим число элементов в нашей адаптивной сетке:

// количество элементов
$items: 1

Я выбрал 12, но вы можете выбрать количество элементов по своему усмотрению. Опять же, обратите внимание, как удобно управлять нашей адаптивной сеткой, если вы хотите изменить количество элементов в сетке на 16, вы сделать это, поменяв всего одно значение. Давайте перейдем к контейнеру адаптивной сетки.

// grid container
.grid {
  display: flex;
  flex-flow: row wrap;
}

Все просто не правда ли? Далее начинается все самое интересное - зацикливаем все что можно!

  1. Нам нужно зациклить все breakpoint и получить доступ к ключу и значению на каждом этапе итерации.
  2. Затем произведем перебор всех элементов.
  3. Для каждого элемента, нам нужно сгенерировать элемент сетки, которая занимает указанную ширину. Например, для элемента 1, ширина будет (1/12) * 100%, для элемента 2, ширина (2/12) * 100%, и т.д. до 12.
  4. Необходимо, чтобы эти элементы были шириной заданного breakpoint, поэтому первоначально, они будут занимать 100% ширину.
  5. Каждый элемент будет иметь модификатор, который задает размер и соответствующие breakpoint.
@each $key, $value in $breakpoints {
  @for $i from 1 through $items {
    .grid__item--#{$key}-span-#{$i} {
      flex: 0 0 100%;
      @include break($key) {
        flex: 0 0 #{$i / $items * 100}%;
      }
    }
  }
}

После компиляции, CSS будет иметь чуть более 1000 строк кода, со всеми префиксами, зато теперь, вы сможете изменить его, поменяв всего 15 строк Sass. Использование адаптивной сетки очень простое:

<div class="grid">
  <div class="grid__item grid__item--xs-span-1">
    xs span 1
  </div>
  <div class="grid__item grid__item--xs-span-2">
    xs span 2
  </div>
  <div class="grid__item grid__item--xs-span-3">
    xs span 3
  </div>
  <div class="grid__item grid__item--xs-span-6">
    xs span 6
  </div>
</div>

Перевод статьи Maintainable Responsive Web Design with Sass

Тэги: sassgrid

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.