Sass kan på en eller annen måte være litt av en svart boks, spesielt for unge utviklere: du legger inn noen ting, du får ut noen ting. Ta &for eksempel velgerreferansen ( ), den er litt skummel.
Når det er sagt, trenger det ikke være slik. Vi kan gjøre syntaksen vennligere med ingenting mer enn to veldig enkle mixins.
arrangementer
Når du skriver Sass, finner du ofte at du skriver ting som dette:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Ganske kjedelig, og ikke nødvendigvis lett å lese. Vi kan lage en liten blanding for å gjøre det enklere.
/// 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; ) ) )Omskriving av vårt forrige eksempel:
.my-element ( color: red; @include on-event ( color: blue; ) )Mye bedre, er det ikke?
Hvis vi nå vil inkludere selektoren, kan vi sette $selfparameteren til true. For eksempel:
.my-element ( @include on-event($self: true) ( color: blue; ) )Denne SCSS-kodebiten gir:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontekster
På samme måte er det ikke uvanlig å style et element avhengig av foreldrene han har. For eksempel noe slikt:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )La oss gjøre syntaksen litt mer vennlig igjen med en enkel blanding:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Omskriving av vårt forrige eksempel:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )