Sass je lahko nekako črna škatla, še posebej za mlade razvijalce: nekaj stvari vložiš, nekaj pa dobiš ven. Vzemimo na primer sklic na izbirnik ( &), nekoliko zastrašujoče je.
Kot rečeno, ni nujno, da je tako. Sintakso lahko naredimo prijaznejšo z dvema zelo preprostima kombinacijama.
Dogodki
Ko pišete Sass, se pogosto znajdete, da pišete take stvari:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Precej dolgočasno in ni nujno lahko za branje. Lahko bi ustvarili malo mešanice, da bi jo poenostavili.
/// 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; ) ) )Prepisovanje našega prejšnjega primera:
.my-element ( color: red; @include on-event ( color: blue; ) )Veliko bolje, kajne?
Zdaj, če želimo vključiti sam izbirnik, lahko nastavimo $selfparameter na true. Na primer:
.my-element ( @include on-event($self: true) ( color: blue; ) )Ta delček SCSS bo dal:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Ozadja
V istem smislu ni redko oblikovati elementa, odvisno od starša, ki ga ima. Na primer, nekaj takega:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Naredimo sintakso spet nekoliko bolj prijazno s preprostim mešanjem:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Prepisovanje našega prejšnjega primera:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )