Использование Sass для управления диапазоном с помощью нейминга BEM в CSS

Использование Sass для управления диапазоном с помощью нейминга BEM в CSS

От автора: управление диапазоном — это та вещь, которую вы вероятно не будете учитывать при работе с BEM CSS и Sass. У нас в распоряжении есть доступ к амперсанду (&) уже довольно давно, он предоставляет нам уровень охвата, но это теряет полезность, когда у нас есть довольно глубокий уровень вложенности. & может повести нас по неправильному пути, и последствия будут довольно непредсказуемыми.

Между тем, в JavaScript мы можем контролировать диапазон this, передавая его переменной в той точке, где нам это нужно. Часто это начало метода или объекта:

Теперь, когда self используется в приведенном выше контексте, у нас всегда есть ссылка на foo(), независимо от того, где мы находимся внутри функции. Это действительно полезно, когда мы заканчиваем скрипты setTimeout, закрытия или обработчики событий.

Вот простой пример. который иллюстрирует это. Используя эту разметку:

мы можем добавить следующий JavaScript:

В этом примере, если вы кликните на элементе component__child при открытой консоли, this зарегистрирует себя, как цель события, которая, оказывается, является элементом, который мы кликнули. Это не идеально, если вам нужна ссылка на foo(). Теперь, если мы запустим в обработчике событий тот же образец self вместо this, консоль сообщит об этом экземпляре foo():

И как это связано с Sass?

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

Этот код задает красивый фиолетовый квадрат с белым кругом внутри него. Ничего революционного, но вполне подходит для нашего примера.

Вероятно, вы заметите, что мы используем синтаксис BEM, поэтому давайте продолжим и создадим модификатор. Мы хотим получить инвертированную версию .component, которая имеет белый фон с фиолетовым кругом на нем. Итак, давайте продолжим и применим подход, который первым приходит на ум — включим его в тот же самый вложенный набор правил:

Подождите, но почему это не работает? Проблема в том, что & имеет область .component—reversed, поэтому &__child-element компилируется в .component—reversed__child-element, который не существует в разметке.

Нам на помощь приходит $self!

Как и в JavaScript, который мы рассматривали раньше, нам нужно перенести нашу начальную область в переменную с именем $self. Вы можете сделать это следующим образом:

Это означает, что везде, где мы используем в нашем компоненте $self, она будет компилироваться в .component. Итак, давайте реорганизуем этот обратный модификатор, чтобы он действительно работал:

Скомпилированный CSS для этого элемента теперь .component—reversed .component__child-element, который, конечно, существует и успешно делает внутренний круг фиолетовым:

Дальнейшие исследования

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

У нас есть доступ к $self, поскольку корневой контекст предоставляет нам гибкость в работе с модификаторам. Поскольку $self содержит значение .component, а & — .component__element, добавление части -reversed генерирует .component—reversed .component__element, то есть именно то, что нам было нужно.

Более сложный пример

Теперь давайте напишем что-нибудь действительно интересное. Мы разместим три отдельные сетки. Используя $self, я собираюсь изменить цвет элементов сетки, используя селектор sibling в самом элементе сетки.

Давайте рассмотрим Sass, который влияет на цвет:

В результате этот селектор компилирует .grid + .grid .grid__item. Сочетание $self и & позволяет нам генерировать это в контексте элемента, который представляет собой наш &. Это предоставляет нам невероятно много возможностей для поддержания порядка в сложных базах кода.

Заключение

Мы использовали JavaScript для управления с помощью Sass диапазоном в наших компонентах BEM, используя этот небольшой фрагмент в корне: $self: &. Благодаря управлению диапазоном, мы получаем гибкость, позволяющую писать чистый, организованный, управляемый BEM на основе CSS. Надеюсь, этот маленький совет поможет вам улучшить свой Sass.

Автор: Andy Bell

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: