Sass võib kuidagi olla natuke must kast, eriti noorte arendajate jaoks: paned mõned asjad sisse, saad mõned asjad välja. Võtke näiteks valiku viide ( &), see on natuke hirmutav.
Nagu öeldud, ei pea see olema selline. Selle süntaksit saab muuta sõbralikumaks kui kaks väga lihtsat miksi.
Sündmused
Sassi kirjutades avastate end sageli kirjutamas selliseid asju:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Üsna tüütu ja pole tingimata lihtne lugeda. Selle lihtsustamiseks võiksime luua väikese segu.
/// 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; ) ) )Meie eelmise näite ümberkirjutamine:
.my-element ( color: red; @include on-event ( color: blue; ) )Palju parem, kas pole?
Nüüd, kui soovime lisada valija ise, saame $selfparameetri seada väärtusele true. Näiteks:
.my-element ( @include on-event($self: true) ( color: blue; ) )See SCSS-i fragment annab:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontekstid
Samamoodi ei ole haruldane elementi kujundada olenevalt tema vanemast. Näiteks midagi sellist:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Muudame süntaksi lihtsa miksiga jälle natuke sõbralikumaks:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Meie eelmise näite ümberkirjutamine:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )