„Sass“ kažkaip gali būti šiek tiek juodos dėžės, ypač jauniems kūrėjams: kai kuriuos dalykus įdėsi, kai kuriuos išgausi. Paimkime &, pavyzdžiui, selektoriaus nuorodą ( ), tai yra šiek tiek baisu.
Tai sakant, tai neturi būti tokia. Mes galime padaryti jo sintaksę draugiškesnę, naudodamiesi tik dviem labai paprastais mišiniais.
Įvykiai
Rašydami „Sass“ dažnai pastebite, kad rašote tokius dalykus:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Gana varginantis ir nebūtinai lengvai skaitomas. Galėtume sukurti šiek tiek mišinio, kad būtų paprasčiau.
/// 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; ) ) )Perrašydami ankstesnį pavyzdį:
.my-element ( color: red; @include on-event ( color: blue; ) )Daug geriau, ar ne?
Dabar, jei norime įtraukti patį selektorių, galime nustatyti $selfparametrą į true. Pavyzdžiui:
.my-element ( @include on-event($self: true) ( color: blue; ) )Šis SCSS fragmentas duos:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontekstai
Laikantis tų pačių nuostatų, neretai elementą kuriama atsižvelgiant į jo turimą tėvą. Pavyzdžiui, kažkas panašaus į šį:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Padarykime sintaksę vėl šiek tiek draugiškesnę naudodami paprastą derinį:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Perrašydami ankstesnį pavyzdį:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )