Sass kan på en eller anden måde være lidt af en sort boks, især for unge udviklere: du lægger nogle ting i, du får nogle ting ud. Tag f.eks. Vælgerreference ( &), det er lidt skræmmende.
Når det er sagt, behøver det ikke være sådan. Vi kan gøre dens syntaks venligere med intet mere end to meget enkle mixins.
Begivenheder
Når du skriver Sass, finder du ofte dig selv at skrive ting som dette:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Ganske kedeligt og ikke nødvendigvis let at læse. Vi kunne skabe et lille mixin for at gø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; ) ) )Omskrivning af vores tidligere eksempel:
.my-element ( color: red; @include on-event ( color: blue; ) )Meget bedre, er det ikke?
Hvis vi nu vil inkludere selektoren, kan vi indstille $selfparameteren til true. For eksempel:
.my-element ( @include on-event($self: true) ( color: blue; ) )Dette SCSS-uddrag giver:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontekster
På samme måde er det ikke ualmindeligt at style et element afhængigt af den forælder, han har. For eksempel noget som dette:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Lad os gøre syntaksen lidt mere venlig igen med en simpel mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Omskrivning af vores tidligere eksempel:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )