Bağlamları ve Olayları Basitleştirme - CSS Hileleri

Anonim

Sass, özellikle genç geliştiriciler için bir şekilde biraz kara kutu olabilir: içine bir şeyler koyarsınız, bir şeyler çıkarırsınız. Örneğin seçici referansını ( &) ele alalım, biraz korkutucu.

Bununla birlikte, böyle olmak zorunda değil. Sözdizimini iki basit karışımdan başka bir şeyle daha dostça yapabiliriz.

Etkinlikler

Sass'ı yazarken, genellikle kendini şöyle şeyler yazarken bulursun:

.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )

Oldukça sıkıcı ve okuması kolay değil. Daha basit hale getirmek için biraz mixin yaratabiliriz.

/// 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; ) ) )

Önceki örneğimizi yeniden yazmak:

.my-element ( color: red; @include on-event ( color: blue; ) )

Çok daha iyi, değil mi?

Şimdi seçicinin kendisini dahil etmek istersek, $selfparametreyi olarak ayarlayabiliriz true. Örneğin:

.my-element ( @include on-event($self: true) ( color: blue; ) )

Bu SCSS pasajı şunları verecektir:

.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )

Bağlamlar

Aynı çizgide, sahip olduğu ebeveyne bağlı olarak bir öğeyi biçimlendirmek alışılmadık bir durum değildir. Örneğin, bunun gibi bir şey:

.my-element ( display: flex; .no-flexbox & ( display: table; ) )

Sözdizimini basit bir karışımla tekrar biraz daha kolay hale getirelim:

/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )

Önceki örneğimizi yeniden yazmak:

.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )