Sass kan på något sätt vara lite av en svart ruta, särskilt för unga utvecklare: du lägger in några saker, du får ut några saker. Ta till exempel väljarreferensen ( &), det är lite läskigt.
Med detta sagt behöver det inte vara så här. Vi kan göra dess syntax vänligare med bara två mycket enkla mixins.
evenemang
När du skriver Sass kommer du ofta att skriva saker så här:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Ganska tråkigt och inte nödvändigtvis lättläst. Vi kan skapa en liten mix för att göra det enklare.
/// 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 av vårt tidigare exempel:
.my-element ( color: red; @include on-event ( color: blue; ) )Mycket bättre, eller hur?
Om vi nu vill inkludera selektorn kan vi ställa in $selfparametern till true. Till exempel:
.my-element ( @include on-event($self: true) ( color: blue; ) )Detta SCSS-utdrag ger:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontexter
På samma sätt är det inte ovanligt att utforma ett element beroende på vilken förälder han har. Till exempel något så här:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Låt oss göra syntaxen lite mer vänlig igen med ett enkelt mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Omskrivning av vårt tidigare exempel:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )