Sass kann irgendwie eine Art Black Box sein, besonders für junge Entwickler: Sie setzen einige Dinge ein, Sie bringen einige Dinge heraus. Nehmen Sie zum Beispiel die Selektorreferenz ( &), sie ist etwas beängstigend.
Davon abgesehen muss es nicht so sein. Wir können die Syntax mit nur zwei sehr einfachen Mixins benutzerfreundlicher gestalten.
Veranstaltungen
Wenn Sie Sass schreiben, schreiben Sie oft Folgendes:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Ziemlich langweilig und nicht unbedingt leicht zu lesen. Wir könnten ein kleines Mixin erstellen, um es einfacher zu machen.
/// 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; ) ) )Umschreiben unseres vorherigen Beispiels:
.my-element ( color: red; @include on-event ( color: blue; ) )Viel besser, nicht wahr?
Wenn wir nun den Selektor selbst einschließen möchten, können wir den $selfParameter auf setzen true. Zum Beispiel:
.my-element ( @include on-event($self: true) ( color: blue; ) )Dieses SCSS-Snippet ergibt:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Kontexte
In diesem Sinne ist es nicht ungewöhnlich, ein Element abhängig von seinem Elternteil zu formatieren. Zum Beispiel so etwas:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Lassen Sie uns die Syntax mit einem einfachen Mixin wieder ein bisschen freundlicher gestalten:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Umschreiben unseres vorherigen Beispiels:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )