Sass entah bagaimana bisa menjadi kotak hitam, terutama untuk pengembang muda: Anda memasukkan beberapa hal, Anda mendapatkan beberapa hal. Ambil referensi pemilih ( &) sebagai contoh, ini agak menakutkan.
Bisa dikatakan, tidak harus seperti ini. Kita bisa membuat sintaksnya lebih ramah dengan tidak lebih dari dua mixin yang sangat sederhana.
Acara
Saat menulis Sass, Anda sering mendapati diri Anda menulis hal-hal seperti ini:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Cukup membosankan, dan belum tentu mudah dibaca. Kita bisa membuat sedikit mixin agar lebih sederhana.
/// 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; ) ) )Menulis ulang contoh kita sebelumnya:
.my-element ( color: red; @include on-event ( color: blue; ) )Jauh lebih baik, bukan?
Sekarang jika kita ingin memasukkan selektor itu sendiri, kita dapat mengatur $selfparameternya ke true. Contohnya:
.my-element ( @include on-event($self: true) ( color: blue; ) )Cuplikan SCSS ini akan menghasilkan:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Konteks
Sejalan dengan itu, tidak jarang memberi gaya pada elemen tergantung pada induk yang dimilikinya. Misalnya, sesuatu seperti ini:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Mari kita buat sintaksnya sedikit lebih bersahabat lagi dengan mixin sederhana:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Menulis ulang contoh kita sebelumnya:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )