Sass může být trochu černou skříňkou, zejména pro mladé vývojáře: dáte nějaké věci, nějaké věci vydáte. Vezměte například volič reference ( &), je to trochu děsivé.
Jak již bylo řečeno, nemusí to tak být. Můžeme jeho syntaxi zpříjemnit ničím jiným než dvěma velmi jednoduchými mixiny.
Události
Při psaní Sass se často setkáte s tím, že píšete takové věci:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Docela únavné a nemusí být snadno čitelné. Mohli bychom vytvořit trochu mixinu, abychom to zjednodušili.
/// 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; ) ) )Přepisujeme náš předchozí příklad:
.my-element ( color: red; @include on-event ( color: blue; ) )Mnohem lepší, že?
Nyní, pokud chceme zahrnout samotný selektor, můžeme nastavit $selfparametr na true. Například:
.my-element ( @include on-event($self: true) ( color: blue; ) )Tento fragment SCSS přinese:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontexty
Stejným způsobem není neobvyklé stylizovat prvek v závislosti na rodiči, kterého má. Například něco takového:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Udělejme syntaxi opět o něco přátelštější pomocí jednoduchého mixinu:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Přepisujeme náš předchozí příklad:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )