Jika ada satu istilah CSS secara dramatis meleset, itu adalah salah satu sehingga memungkinkan untuk menentukan positionproperti, serta empat sifat offset ( top, right, bottom, left).
Untungnya, ini biasanya sesuatu yang dapat diselesaikan dengan praprosesor CSS seperti Sass. Kita hanya perlu membuat mixin sederhana untuk menyelamatkan kita dari mendeklarasikan 5 properti secara manual.
/// Shorthand mixin for offset positioning /// @param (String) $position - Either `relative`, `absolute` or `fixed` /// @param (Length) $top (null) - Top offset /// @param (Length) $right (null) - Right offset /// @param (Length) $bottom (null) - Bottom offset /// @param (Length) $left (null) - Left offset @mixin position($position, $top: null, $right: null, $bottom: null, $left: null) ( position: $position; top: $top; right: $right; bottom: $bottom; left: $left; )Sekarang masalahnya adalah kita mengandalkan argumen bernama saat menggunakan mixin ini untuk menghindari keharusan mengatur semuanya ketika hanya satu atau dua yang diinginkan. Perhatikan kode berikut:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Yang dikompilasi menjadi:
.foo ( position: absolute; top: 1em; left: 50%; )Memang, Sass tidak pernah mengeluarkan properti yang memiliki nilai null.
Menyederhanakan API
Kita bisa memindahkan tipe posisi ke nama mixin daripada harus mendefinisikannya sebagai argumen pertama. Untuk melakukannya, kita memerlukan tiga mixin tambahan yang akan berfungsi sebagai alias untuk mixin `posisi` yang baru saja kita tentukan.
/// Shorthand mixin for absolute positioning /// Serves as an alias for `position(absolute,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin absolute($args… ) ( @include position(absolute, $args… ); ) /// Shorthand mixin for relative positioning /// Serves as an alias for `position(relative,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin relative($args… ) ( @include position(relative, $args… ); ) /// Shorthand mixin for fixed positioning /// Serves as an alias for `position(fixed,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin fixed($args… ) ( @include position(fixed, $args… ); )Menulis ulang contoh kita sebelumnya:
.foo ( @include absolute($top: 1em, $left: 50%); )Lebih jauh
Jika Anda ingin sintaks yang lebih dekat dengan yang diusulkan oleh Nib (kerangka kerja Stylus), saya sarankan Anda untuk melihat artikel ini.
.foo ( @include absolute(top 1em left 50%); )