Không có cách nào dễ dàng để đủ điều kiện một bộ chọn từ bên trong bộ quy tắc liên quan của nó. Bằng cách đủ điều kiện, ý tôi là viết trước một tên phần tử (ví dụ a) cho một lớp (ví dụ .btn) để một bộ quy tắc cụ thể cho sự kết hợp của một bộ chọn phần tử và một bộ chọn lớp (ví dụ a.btn) chẳng hạn.
Cho đến ngày nay, cách tốt nhất (và duy nhất cho đến nay) để làm như vậy là như sau:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, chắc chắn không thực sự thanh lịch, phải không? Lý tưởng nhất là bạn có thể muốn ẩn loại cú pháp khủng khiếp này đằng sau một mixin để bạn giữ một API sạch sẽ và thân thiện, đặc biệt nếu bạn có các nhà phát triển mới trong nhóm của mình.
Tất nhiên, làm như vậy cực kỳ đơn giản:
/// Since the current way to qualify a class from within its ruleset is quite /// ugly, here is a mixin providing a friendly API to do so. /// @author Hugo Giraudel /// @param (String) $element-selector - Element selector @mixin qualify($element-selector) ( @at-root #($element-selector + &) ( @content; ) )Bây giờ, viết lại đoạn mã trước của chúng tôi:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Tốt hơn nhiều, phải không? Tuy nhiên, qualifynghe có vẻ hơi phức tạp đối với những người mày mò Sass thiếu kinh nghiệm. Bạn có thể cung cấp bí danh khi tên mô tả hơn, chẳng hạn như when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Một ví dụ cuối cùng:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )