Сасс некако може бити мала црна кутија, посебно за младе програмере: ако ставите неке ствари, неке ствари извадите. Узмимо на &пример референцу селектора ( ), помало је застрашујуће.
То се каже, не мора бити овако. Синтаксу можемо учинити угоднијом са само два врло једноставна микса.
Догађаји
Када пишете Сасс, често нађете да пишете овакве ствари:
.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; ) )Овај СЦСС исечак ће дати:
.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; ) )