Sass kan op de een of andere manier een beetje een zwarte doos zijn, vooral voor jonge ontwikkelaars: je stopt er wat in, je haalt er wat uit. Neem bijvoorbeeld de selectorreferentie ( &), het is een beetje eng.
Dat gezegd hebbende, het hoeft niet zo te zijn. We kunnen de syntax ervan vriendelijker maken met niets meer dan twee zeer eenvoudige mixins.
Evenementen
Als je Sass schrijft, merk je vaak dat je dit soort dingen schrijft:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Best vervelend, en niet per se gemakkelijk te lezen. We kunnen een kleine mix maken om het eenvoudiger te maken.
/// 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; ) ) )Ons vorige voorbeeld herschrijven:
.my-element ( color: red; @include on-event ( color: blue; ) )Veel beter, is het niet?
Als we nu de selector zelf willen opnemen, kunnen we de $selfparameter instellen op true. Bijvoorbeeld:
.my-element ( @include on-event($self: true) ( color: blue; ) )Dit SCSS-fragment levert:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Contexten
In dezelfde lijn is het niet ongebruikelijk om een element te stylen afhankelijk van de ouder die hij heeft. Zoiets als dit:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Laten we de syntaxis weer wat vriendelijker maken met een simpele mix:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Ons vorige voorbeeld herschrijven:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )