Nếu có một tốc ký CSS đột ngột bỏ lỡ, nó là một trong những làm cho nó có thể để xác định positiontài sản, cũng như bốn thuộc tính bù đắp ( top, right, bottom, left).
May mắn thay, điều này thường có thể được giải quyết bằng một bộ tiền xử lý CSS chẳng hạn như Sass. Chúng tôi chỉ phải xây dựng một mixin đơn giản để tiết kiệm cho chúng tôi khai báo 5 thuộc tính theo cách thủ công.
/// 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; )Bây giờ vấn đề là chúng ta dựa vào các đối số được đặt tên khi sử dụng mixin này để tránh phải đặt tất cả chúng khi chỉ muốn một hoặc hai. Hãy xem xét đoạn mã sau:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )… Mà biên dịch thành:
.foo ( position: absolute; top: 1em; left: 50%; )Thật vậy, Sass không bao giờ xuất ra một thuộc tính có giá trị là null.
Đơn giản hóa API
Chúng tôi có thể di chuyển loại vị trí đến tên mixin thay vì phải xác định nó như đối số đầu tiên. Để làm như vậy, chúng ta cần thêm ba mixin sẽ đóng vai trò là bí danh cho mixin `vị trí` mà chúng ta vừa xác định.
/// 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… ); )Viết lại ví dụ trước của chúng tôi:
.foo ( @include absolute($top: 1em, $left: 50%); )Đi xa hơn
Nếu bạn muốn một cú pháp gần với cú pháp được đề xuất bởi Nib (Stylus 'framework), tôi khuyên bạn nên xem qua bài viết này.
.foo ( @include absolute(top 1em left 50%); )