Sass kaut kā var būt nedaudz melna kaste, īpaši jauniem izstrādātājiem: jūs ievietojat dažas lietas, jūs saņemat dažas lietas. Piemēram, ņemiet atlasītāja atsauci ( &), tas ir mazliet biedējoši.
To sakot, tam nav jābūt tādam. Mēs varam padarīt tās sintaksi draudzīgāku ar diviem ļoti vienkāršiem miksiem.
Notikumi
Rakstot Sass, jūs bieži atrodaties rakstot šādas lietas:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Diezgan garlaicīgs un ne vienmēr viegli lasāms. Mēs varētu izveidot nedaudz mixin, lai padarītu to vienkāršāku.
/// 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; ) ) )Pārrakstot mūsu iepriekšējo piemēru:
.my-element ( color: red; @include on-event ( color: blue; ) )Daudz labāk, vai ne?
Tagad, ja mēs vēlamies iekļaut pašu selektoru, mēs varam iestatīt $selfparametru true. Piemēram:
.my-element ( @include on-event($self: true) ( color: blue; ) )Šis SCSS fragments dos:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Konteksti
Saskaņā ar tām pašām līnijām, tas nav nekas neparasts, ka elements tiek veidots atkarībā no viņa vecākiem. Piemēram, kaut kas līdzīgs šim:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Atkal padarīsim sintaksi mazliet draudzīgāku, izmantojot vienkāršu kombināciju:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Pārrakstot mūsu iepriekšējo piemēru:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )