Урок 9. Вложенность миксинов

9.07.2019 Нет комментариев 869
урок 9 вложенность миксинов

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

Пример вложенности в CSS

Создаём файл index.html, в нём div с классом .block и дочерними элементами div.block-in и h1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LESS</title>
  <link rel="stylesheet" href="bundle.min.css">
</head>
<body>
  <div class="block">
    <div class="block-in">
      <h1>
        Hello, Less!
      </h1>
    </div>
  </div>
</body>
</html>

Сначала напишем привычные стили CSS:

.block {
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 300px;
}

.block .block-in {
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 200px;
}

.block .block-in h1 {
  font-size: 24px;
  color: #fff;
  text-align: center;
}

Для наглядности, посмотрим на результат в виде картинки:

вложенные миксины

Что бросается в глаза? Дублирование кода: в родительском и дочернем используются одни и те же свойства и их значения (display, align-items и justify-content), а так же background-color, width и height:

дублирование кода css
дублирование кода css

Less как раз и создан для сокращения кода.

Теперь вместо стилей CSS создаем миксин @flex и присвоим ему те самые свойства через переменные @bg, @width и @height.
Для переменной @height укажем значение по умолчанию 300px на тот случай, когда свое свойство height мы задавать не будем и компилятор подставит значение по умолчанию.

.flex(@bg, @width, @height: 300px) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: @bg;
  width: @width;
  height: @height;
}

.block {
  .flex(green, 40%); // задаём @bg, @width
}

.block .block-in {
  .flex(blue, 80%, 200px); // задаём @bg, @width, @height
}

.block .block-in h1 {
  font-size: 24px;
  color: #fff;
  text-align: center;
}

Используем миксин .flex в стилях и указываем свои значения background-color, width и height.

Смотрим результат компиляции в bundle.min.css
22 строки less кода по сравнению с 33 строками CSS — на треть меньше!
Причем компилятор автоматически подставил префиксы, которые пришлось бы прописывать вручную.

less to bundle-css
less to bundle.min.css

Вложенность миксина

А теперь улучшим код еще, когда воспользуемся вложенностью, которая обозначается знаком амперсанда &:

.block {
    .flex(green, 40%);
    & .block-in {
        .flex(blue, 80%, 200px);
        & h1 {
            font-size: 24px;
            color: #fff;
            text-align: center;
        }
    }
}

Это аналог предыдущей записи, где для каждого селектора мы прописывали цепочку его родителей.
Теперь же дочерний селектор вкладывается в родительский, название которого заменяется знаком амперсанда:

амперсанд - вложенность миксина
амперсанд — вложенность миксина

Когда обязателен знак амперсанда?

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

вложенность миксина без знака амперсанда
вложенность миксина без знака амперсанда

Дополнительный стиль

Но если нам нужна не вложенность, а дополнительный стиль у какого-то элемента? Для примера, добавим для .block еще один стиль .more

<div class="block more">
   <div class="block-in">
      <h1>
        Hello, Less!
      </h1>
   </div>
</div>

Теперь назначим стили для класса .more в виде синей рамки. Сразу после & не ставим пробел, а пишем .more. Таким образом, получаем дополнительный стиль:

& и класс без пробела
& и класс без пробела

Так выглядит результат:

дополнительный класс .more для .block
дополнительный класс .more для .block

Запись & и > воспринимаются аналогично правилам CSS

  • & > h1 — первый потомок/ребенок h1 (или любой другой элемент)
  • && — два знака амперсанда и более — вложенность селектора в самого себя
знак амперсанда и знак больше
знак амперсанда и знак больше

Запись стилей по методологии БЭМ делается так: ставим два нижних подчеркивания (по требованиям БЭМ) после амперсанда:

&__header
&__item

Сделаем для примера такие стили:

&__header { 
    font-size: 24px;
  }

  &__item {
    padding: 5px;
  }
запись стилей по БЭМ
запись стилей по БЭМ

Заметь, насколько удобно менять название класса. Достаточно переименовать .block, а дочерние классы изменятся автоматически:

переименование класса
переименование класса

Псевдоэлементы (:hover, :after и т.д.)

Псевдоэлементы добавляются точно так же. Например для .block__item при наведении, т.е. событии :hover, сделаем background-color: gray

Запись псевдоэлементов в миксине
запись псевдоэлементов в миксине

Можем перечислять селекторы через запятую, точно так же, как в css:

групповой селектор в миксине
групповой селектор в миксине

Амперсанд после селектора меняет порядок селекторов:

Амперсанд после селектора
амперсанд после селектора

На этом всё про вложенность миксинов! Обратная связь категорически приветствуется 🙂

Официальная документация о миксинах с примерами.

При написании статьи использовались материалы WebForMySelf.com

Голосов: 0, Средняя оценка: 0
Top