Sass poate fi într-un fel oarecum o cutie neagră, în special pentru tinerii dezvoltatori: puneți câteva lucruri, scoateți unele lucruri. Luați referința selectorului ( &), de exemplu, este puțin înfricoșător.
Acestea fiind spuse, nu trebuie să fie așa. Putem face sintaxa mai prietenoasă cu nimic mai mult decât două mix-uri foarte simple.
Evenimente
Când scrii Sass, te găsești adesea scriind astfel de lucruri:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Destul de plictisitor și nu neapărat ușor de citit. Am putea crea un mic mixin pentru ao simplifica.
/// 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; ) ) )Rescrierea exemplului nostru anterior:
.my-element ( color: red; @include on-event ( color: blue; ) )Mult mai bine, nu-i așa?
Acum, dacă dorim să includem selectorul în sine, putem seta $selfparametrul la true. De exemplu:
.my-element ( @include on-event($self: true) ( color: blue; ) )Acest fragment SCSS va produce:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Contextele
În același mod, nu este neobișnuit să stilizezi un element în funcție de părintele pe care îl are. De exemplu, ceva de genul acesta:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Să facem din nou sintaxa un pic mai prietenoasă cu un mixin simplu:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Rescrierea exemplului nostru anterior:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )