Sass може бути якимось чином чорним ящиком, особливо для молодих розробників: ви вкладаєте деякі речі, ви отримуєте деякі речі. Візьмемо, &наприклад, посилання на селектор ( ), це трохи страшно.
Сказано, це не повинно бути таким. Ми можемо зробити його синтаксис більш дружнім лише за допомогою двох дуже простих міксинів.
Події
Пишучи Sass, ти часто виявляєш, що пишеш такі речі:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Досить нудно, і не обов’язково легко читається. Ми могли б створити трохи міксину, щоб зробити його простішим.
/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )Переписуємо наш попередній приклад:
.my-element ( color: red; @include on-event ( color: blue; ) )Набагато краще, чи не так?
Тепер, якщо ми хочемо включити сам селектор, ми можемо встановити для $selfпараметра параметр true. Наприклад:
.my-element ( @include on-event($self: true) ( color: blue; ) )Цей фрагмент SCSS дасть:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Контексти
У тому ж напрямку, не рідко стилізувати елемент залежно від батьків, який він має. Наприклад, приблизно так:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Знову зробимо синтаксис трохи більш дружнім за допомогою простого змішування:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Переписуємо наш попередній приклад:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )