Giả sử bạn cần sử dụng một bộ chọn nhất định ở nhiều nơi trong mã của mình. Nó không phải là quá phổ biến, chắc chắn, nhưng mọi thứ vẫn xảy ra. Mã lặp lại thường là một cơ hội để trừu tượng hóa. Các giá trị trừu tượng trong Sass rất dễ dàng, nhưng các bộ chọn phức tạp hơn một chút.
Một cách để làm điều đó là tạo bộ chọn của bạn dưới dạng một biến. Đây là một ví dụ về danh sách các bộ chọn được phân tách bằng dấu phẩy:
$selectors: " .module, body.alternate .module ";Sau đó, để sử dụng, bạn phải nội suy biến, như sau:
#($selectors) ( background: red; )Điều đó cũng hoạt động với lồng:
.nested ( #($selectors) ( background: red; ) )Tiền tố
Một biến cũng có thể chỉ là một phần của bộ chọn, giống như một tiền tố.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Bạn cũng có thể sử dụng lồng để thực hiện tiền tố:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Bộ chọn trong Bản đồ
Có lẽ sự trừu tượng của bạn sẽ dẫn đến tình huống cặp khóa / giá trị. Đó là bản đồ ở Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Bạn có thể sử dụng chúng riêng lẻ như:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Hoặc lặp qua chúng:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Ví dụ
Xem Biến Pen Sass cho Người chọn của Chris Coyier (@chriscoyier) trên CodePen.