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; ) )