Знакомимся с 'тихими' placeholder

Статья посвящена вопросу “тихих” placeholder’ов в препроцессоре Sass. Что это такое и в чем преимущество их использования.

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

Например, можно воспользоваться миксинами ( ) для вставки группы CSS-свойств (или CSS-правил) в CSS-коде.

Или же использовать директиву для расширения набора CSS-свойств одного HTML-элемента за счет CSS-свойств другого HTML-элемента.

В Sass версии 3.2 введена новая концепция под названием , которая делает использование директивы еще более эффективным способом.

Но прежде чем мы перейдем к рассмотрению этого нововведенния, давайте остановимся на моменте, каким образом работает расширение ( ) CSS-свойств в Sass.

Как работает @extend

Директива в препроцессоре Sass позволяет CSS-селекторам с легкостью обмениваться между собой своими CSS-свойствами. Лучше всего вышесказанное можно проиллюстрировать на живом примере:

Результатом компиляции этого SCSS-кода в CSS-код будет следующий фрагмент:

Рассмотрим “механизм” показанного выше примера более детально. В нем директива играет ключевую роль. С помощью нее селекторы и наследуют свойства селектора . При изменении CSS-свойств селектора автоматически будут меняться свойства селекторов и , так как они наследуют определенный набор CSS-свойств у селектора . Довольно изящный подход, не правда ли?

А вот теперь наступает интересный момент. Что, если элемент с классом не планируется использовать и он даже не будет присутствовать в HTML-разметке? Но CSS-свойства этого элемента нам нужны для стилизации элементов и .

Получается, что результирующий CSS-код будет неоправданно раздут из-за того, что в нем присутствует “лишний” элемент, который напрямую никогда не будет использован.

И тут наступает момент для выхода на сцену героя этой статьи - селектора (его еще называют “тихим” ‘ом):

Знакомимся с селектором placeholder

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

Селекторы имеют одну специфичную для них особенность - они никак не проявляют себя в скомпилированном CSS-коде. Можно сказать по другому - вы никогда не найдете селекторов в результирующем CSS-коде (поэтому они и носят такое название - “тихие” ). В скомпилированном CSS-коде будут только селекторы, которые используют “тихие” ‘ы, но никак не сами “тихие” ‘ы.

Вернемся назад, к нашему начальному примеру. Заменим в нем имя класса на имя “тихого” placeholder’а - :

В результате скомпилированный CSS-код будет выглядеть таким образом:

Обратите внимание на важный момент - класс теперь не присутствует в результирующем CSS-коде! Его там нет!

@extend или @include

На первый взгляд может показаться, что “тихие” - это почти тоже самое, что и миксины ( ). С функциональной точки зрения такое утверждение абсолютно верно - результат в браузере получается идентичным. А вот с точки зрения CSS разница очень существенная!

Давайте снова изменим наш первоначальный пример и теперь воспользуемся миксином :

Посмотрим на сгенерированный CSS-код:

С точки зрения разработки данный пример ничем не хуже примера с использованием “тихого” ‘а.

Но обратите внимание на тот факт, что CSS-правила и дублируются между селекторами и , что приводит к неоправданному раздутию кода. В случае использования “тихого” этого не происходит.

Ограничения

Использование директивы имеет одно ограничение, связанное с тем, что применение “тихих” ‘ов никак не оправдывает себя в медиа-запросах .

Рассмотрим такой пример:

Видим, что в данном случае “тихий” добавлен для селекторов, находящихся внутри медиа-запроса .

Однако, при попытке компиляции этого SCSS-кода в CSS-код получиться ошибка:

You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive. From “@extend %icon” on line 8 of icons.scss

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

Механизм работы директивы основан на добавлении одного селектора к другому селектору без необходимости дублировать CSS-свойства этих селекторов. Однако невозможно объединять селекторы, находящиеся в разных медиа-запросах .

Но можно поступить по другому, чтобы выйти из данной затруднительной ситуации. Любой медиа-запрос, который служит оберткой для “тихого” , распространяют свои свойства на селекторы, не размещенные внутри этого запроса.

Выражение достаточно запутанное, поэтому лучше приведу пример:

Компиляция пройдет без ошибок и ее результатом будет CSS-код:

Заключение

Обе директивы и являются очень полезными инструментами, между которыми существует тонкое различие. Если вопрос производительности генерируемого CSS-кода имеет для вас важное значение или же перед вами стоит проблема повторяемости кода, то решением будет являться директива . В некоторых случая значительно упрощает получаемый CSS-код и улучшает его производительность.

Конечно же, ничто не мешает вам смешивать между собой директиву и миксин (если этого требуют обстоятельства):

Однако, в разработке я придерживаюсь такого подхода, когда исходный код легко читается и поддерживается.

Чаще всего встречается в URL, но все же его значение чуть более шире - slug - это *уникальная строка-идентификатор*, понятная человеку (*. … Continue reading