Jika terdapat satu trengkas CSS secara mendadak hampir berlaku, ia adalah salah satu yang membuat ia mungkin untuk menentukan positionharta, serta empat hartanah mengimbangi ( top, right, bottom, left).
Nasib baik, ini biasanya sesuatu yang dapat diselesaikan dengan preprocessor CSS seperti Sass. Kita hanya perlu membina mixin sederhana untuk menyelamatkan kita daripada menyatakan 5 sifat 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 bergantung pada argumen yang dinamakan ketika menggunakan mixin ini untuk mengelakkan daripada menetapkan semuanya ketika hanya satu atau dua yang dikehendaki. Pertimbangkan kod berikut:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... yang menyusun menjadi:
.foo ( position: absolute; top: 1em; left: 50%; )Sesungguhnya, Sass tidak pernah mengeluarkan harta yang mempunyai nilai null.
Memudahkan API
Kita boleh memindahkan jenis posisi ke nama mixin daripada harus mendefinisikannya sebagai argumen pertama. Untuk melakukannya, kami memerlukan tiga mixin tambahan yang akan berfungsi sebagai alias untuk mixin `position` yang baru kami 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… ); )Tulis semula contoh sebelumnya:
.foo ( @include absolute($top: 1em, $left: 50%); )Melangkah lebih jauh
Sekiranya anda mahukan sintaks lebih dekat dengan sintaks yang dicadangkan oleh Nib (kerangka Stylus), saya cadangkan anda melihat artikel ini.
.foo ( @include absolute(top 1em left 50%); )