Có thể tạo kiểu cho bố mẹ của một loại phần tử nhất định trong SASS không?

Question

Tôi muốn làm điều này:

.classname { 
    color: red 

    a& { 
    color: blue; 
    } 
} 

và cho nó để biên dịch để:

.classname { 
    color: red; 
} 

a.classname { 
    color: blue; 
} 

Có cú pháp có sẵn để hỗ trợ này? Tôi đã thử sử dụng a&, #{a&} và chức năng la bàn #{append-selector("a", "&")} nhưng chúng không biên dịch, a &, nhưng kết quả, rõ ràng là trong a .classname thay vì a.classname.

Answer 1

Điều này không thực sự có thể với cú pháp lồng nhau cho SASS. Từ số SASS reference:

Quy tắc bên trong sau đó chỉ áp dụng trong bộ chọn của quy tắc bên ngoài.

Quy tắc lồng nhau là đường cú pháp giúp dễ dàng viết hơn descendent selectors CSS vì chúng là một trong những cấu trúc CSS phổ biến nhất. Trong khi nó được tốt đẹp để sử dụng cách tiếp cận của bạn để viết loại quy tắc, nó không phải là những gì cú pháp được thiết kế (hoặc xác định) để làm.

Answer 2

Tôi đã cố gắng suy nghĩ thông qua các tùy chọn khác nhau sẽ cho phép bạn làm điều này, nhưng tôi chỉ có thể quay lại với "tại sao"? Trường hợp sử dụng là gì và tại sao bạn cần phải làm điều này so với một thứ khác đạt được kết quả tương tự như những gì bạn muốn làm.

Answer 3

Tôi không thể tìm thấy giải pháp cho thẻ nhưng trong trường hợp cụ thể này, bạn có thể sử dụng &[href]. Đó là chậm hơn nhưng nó thực sự chính xác hơn (một số <a> thẻ có thể không được liên kết.)

Hy vọng sớm chúng ta sẽ có thể sử dụng &:any-link (What's the :any-link pseudo-class for?) nhưng nó không được hỗ trợ bởi các trình duyệt chưa