Sass nekako može biti mali crni okvir, posebno za mlade programere: neke stvari stavite, neke izvadite. Uzmimo &za primjer referencu selektora ( ), pomalo je zastrašujuće.
Kad se to kaže, ne mora biti ovako. Sintaksu možemo učiniti ugodnijom samo s dva vrlo jednostavna miksa.
Događaji
Kad pišete Sass, često vam se dogodi da pišete ovakve stvari:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Prilično zamorno i ne nužno lako za čitanje. Mogli bismo stvoriti malo mješavine kako bismo to učinili jednostavnijim.
/// 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; ) ) )Prepisivanje našeg prethodnog primjera:
.my-element ( color: red; @include on-event ( color: blue; ) )Puno bolje, zar ne?
Sada ako želimo uključiti sam selektor, možemo postaviti $selfparametar na true. Na primjer:
.my-element ( @include on-event($self: true) ( color: blue; ) )Ovaj SCSS isječak dobit će:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Konteksti
U skladu s istim crtama, nije rijetko stilizirati element ovisno o roditelju kojeg ima. Na primjer, otprilike ovako:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Učinimo sintaksu malo prijateljskijom uz jednostavan mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Prepisivanje našeg prethodnog primjera:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )