Sass może być w pewnym sensie czarną skrzynką, szczególnie dla młodych programistów: niektóre rzeczy wkładasz, niektóre wyjmujesz. Weźmy na przykład referencję selektora ( &), jest to trochę przerażające.
Biorąc to pod uwagę, nie musi tak być. Możemy uczynić jego składnię bardziej przyjazną za pomocą tylko dwóch bardzo prostych miksów.
Wydarzenia
Pisząc Sass, często piszesz takie rzeczy:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Dość żmudne i niekoniecznie łatwe do odczytania. Moglibyśmy stworzyć małą mieszankę, aby było to prostsze.
/// 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; ) ) )Przepisując nasz poprzedni przykład:
.my-element ( color: red; @include on-event ( color: blue; ) )O wiele lepiej, prawda?
Teraz, jeśli chcemy uwzględnić sam selektor, możemy ustawić $selfparametr na true. Na przykład:
.my-element ( @include on-event($self: true) ( color: blue; ) )Ten fragment kodu SCSS zwróci:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Konteksty
W ten sam sposób nie jest niczym niezwykłym stylizowanie elementu w zależności od rodzica, którego ma. Na przykład coś takiego:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Uczyńmy ponownie składnię nieco bardziej przyjazną dzięki prostemu miksowaniu:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Przepisując nasz poprzedni przykład:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )