Sass entah bagaimana boleh menjadi kotak hitam, terutama untuk pemaju muda: anda memasukkan beberapa perkara, anda mendapat beberapa perkara. Ambil rujukan pemilih ( &) misalnya, agak menakutkan.
Yang dikatakan, tidak harus seperti ini. Kita boleh menjadikan sintaksnya lebih mesra dengan tidak lebih dari dua mixin yang sangat sederhana.
Acara
Semasa menulis Sass, anda sering mendapati diri anda menulis perkara seperti ini:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Cukup membosankan, dan tidak semestinya senang dibaca. Kita boleh membuat sedikit mixin untuk menjadikannya lebih mudah.
/// 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; ) ) )Tulis semula contoh sebelumnya:
.my-element ( color: red; @include on-event ( color: blue; ) )Jauh lebih baik, bukan?
Sekarang jika kita ingin memasukkan pemilih itu sendiri, kita dapat menetapkan $selfparameter ke true. Contohnya:
.my-element ( @include on-event($self: true) ( color: blue; ) )Coretan SCSS ini akan menghasilkan:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Konteks
Seiring dengan gaya yang sama, tidak jarang menggayakan elemen bergantung pada ibu bapa yang dimilikinya. Contohnya, seperti ini:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Mari buat sintaks sedikit lebih mesra lagi dengan mixin ringkas:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Tulis semula contoh sebelumnya:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )