A Sass valahogy egy kicsit fekete doboz lehet, különösen a fiatal fejlesztők számára: néhány dolgot beletesz, néhányat kihoz. Vegyük például a választó hivatkozást ( &), ez egy kicsit ijesztő.
Ennek ellenére nem kell, hogy ilyen legyen. Szintaxisát barátságosabbá tehetjük, csak két nagyon egyszerű keverékkel.
Események
A Sass írásakor gyakran talál ilyet:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Elég unalmas, és nem feltétlenül könnyen olvasható. Készíthetnénk egy kis keveréket, hogy egyszerűbb legyen.
/// 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; ) ) )Átírva előző példánkat:
.my-element ( color: red; @include on-event ( color: blue; ) )Sokkal jobb, nem igaz?
Most, ha be akarjuk vonni magát a választót, akkor a $selfparamétert állíthatjuk true. Például:
.my-element ( @include on-event($self: true) ( color: blue; ) )Ez az SCSS-kódrészlet a következőket adja:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Összefüggések
Ugyanezen vonalon nem ritka, hogy egy elemet stilizáljon a szülőjétől függően. Például valami ilyesmi:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Tegyük ismét egy kicsit barátságosabbá a szintaxist egy egyszerű keverővel:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Átírva előző példánkat:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )