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