Sass può in qualche modo essere un po 'una scatola nera, specialmente per i giovani sviluppatori: metti alcune cose, ne tiri fuori alcune. Prendi il riferimento al selettore ( &) per esempio, è un po 'spaventoso.
Detto questo, non deve essere così. Possiamo rendere la sua sintassi più amichevole con nient'altro che due semplici mixin.
Eventi
Quando scrivi Sass, ti ritrovi spesso a scrivere cose come questa:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Abbastanza noioso e non necessariamente facile da leggere. Potremmo creare un piccolo mixin per renderlo più semplice.
/// 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; ) ) )Riscrittura del nostro esempio precedente:
.my-element ( color: red; @include on-event ( color: blue; ) )Molto meglio, non è vero?
Ora se vogliamo includere il selettore stesso, possiamo impostare il $selfparametro su true. Per esempio:
.my-element ( @include on-event($self: true) ( color: blue; ) )Questo snippet SCSS produrrà:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Contesti
Sulla stessa linea, non è raro modellare un elemento a seconda del genitore che ha. Ad esempio, qualcosa del genere:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Rendiamo di nuovo un po 'più amichevole la sintassi con un semplice mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Riscrittura del nostro esempio precedente:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )