Sass voi jotenkin olla pieni musta laatikko, erityisesti nuorille kehittäjille: laitat joitain asioita, saat joitain asioita. Otetaan esimerkiksi valitsimen viite ( &), se on vähän pelottavaa.
Tästä huolimatta sen ei tarvitse olla tällainen. Voimme tehdä sen syntaksista ystävällisemmän vain kahdella hyvin yksinkertaisella sekoituksella.
Tapahtumat
Kun kirjoitat Sassia, huomaat usein kirjoittavan tällaisia asioita:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Melko tylsä, eikä välttämättä helppo lukea. Voisimme luoda pienen sekoituksen, jotta se olisi yksinkertaisempi.
/// 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; ) ) )Uudelleen kirjoittamalla edellinen esimerkkimme:
.my-element ( color: red; @include on-event ( color: blue; ) )Paljon parempi, eikö olekin?
Nyt kun haluamme sisällyttää valitsimen itse, voimme asettaa $selfparametrin arvoksi true. Esimerkiksi:
.my-element ( @include on-event($self: true) ( color: blue; ) )Tämä SCSS-katkelma tuottaa:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Asiayhteydet
Samalla linjalla ei ole harvinaista, että elementti muotoillaan hänen vanhemmansa mukaan. Esimerkiksi jotain tällaista:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Tehdään syntaksista taas hieman ystävällisempi yksinkertaisella sekoituksella:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Uudelleen kirjoittamalla edellinen esimerkkimme:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )