Sass môže byť trochu čiernou skrinkou, najmä pre mladých vývojárov: niektoré veci vložíte, niektoré dostanete von. Vezmime si napríklad selektor reference ( &), je to trochu strašidelné.
Ako už bolo povedané, nemusí to tak byť. Môžeme urobiť jeho syntax priateľskejšou iba s dvoma veľmi jednoduchými mixínmi.
Diania
Pri písaní Sass sa často stretávate s tým, že píšete napríklad tieto veci:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Celkom zdĺhavé a nie nevyhnutne ľahko čitateľné. Mohli by sme vytvoriť trochu mixinu, aby to bolo jednoduchšie.
/// 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; ) ) )Prepisujeme náš predchádzajúci príklad:
.my-element ( color: red; @include on-event ( color: blue; ) )Oveľa lepšie, že?
Teraz, ak chceme zahrnúť samotný selektor, môžeme nastaviť $selfparameter na true. Napríklad:
.my-element ( @include on-event($self: true) ( color: blue; ) )Tento úryvok SCSS prinesie:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontexty
Rovnakým spôsobom nie je nezvyčajné štýlovať prvok v závislosti od rodiča, ktorého má. Napríklad niečo také:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Poďme urobiť syntax opäť o niečo prívetivejšou pomocou jednoduchého mixinu:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Prepisujeme náš predchádzajúci príklad:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )