Dramatik bir steno CSS özlüyor varsa, bunun mümkün tanımlamak için yapım biridir positionözelliğini, hem de dört ofset özellikleri ( top, right, bottom, left).
Neyse ki, bu genellikle Sass gibi bir CSS ön işlemcisi ile çözülebilecek bir şeydir. Bizi 5 özelliği manuel olarak bildirmekten kurtaracak basit bir karışım oluşturmamız gerekiyor.
/// 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; )Şimdi mesele şu ki, bu karışımı kullanırken, yalnızca bir veya iki istendiğinde hepsini ayarlamak zorunda kalmamak için adlandırılmış argümanlara güveniyoruz. Aşağıdaki kodu göz önünde bulundurun:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Derleyen:
.foo ( position: absolute; top: 1em; left: 50%; )Aslında, Sass hiçbir zaman değerine sahip bir özellik çıktılamaz null.
API'yi basitleştirme
İlk bağımsız değişken olarak tanımlamak zorunda kalmadan, konum türünü mixin adına taşıyabiliriz. Bunu yapmak için, az önce tanımladığımız "position" karışımına takma ad olarak hizmet edecek üç ekstra mixine ihtiyacımız var.
/// 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… ); )Önceki örneğimizi yeniden yazmak:
.foo ( @include absolute($top: 1em, $left: 50%); )Daha ileri gitmek
Nib (Stylus çerçevesi) tarafından önerilene daha yakın bir sözdizimi istiyorsanız, bu makaleye bir göz atmanızı tavsiye ederim.
.foo ( @include absolute(top 1em left 50%); )