Nhận giá trị thuộc tính cha mẹ trong sass

Question

Tôi đang cố gắng tạo một kiểu dáng cao cấp <a> cho ứng dụng của tôi bằng cách sử dụng sass. Hầu hết các liên kết trên trang web đều có màu xanh lục nên tôi có kiểu này như một phong cách. (Tôi đang sử dụng la bàn cho chức năng darken)

Tuy nhiên, trong một số trường hợp, liên kết không có màu xanh lá cây. Trong những trường hợp này, tôi sẽ phải chỉ định cả màu văn bản và màu di chuột, nếu không nó sẽ mặc định là lơ lửng màu xanh lục. Tôi tự hỏi nếu có một cách để làm DRYer này. Lý tưởng nhất là tôi sẽ có thể có được các lớp cha mẹ màu sắc, như vậy.

a { 
    color: green; 

    &:hover { 
    color: darken(parent(color), 10%); 
    } 
} 

Bằng cách đó, di chuột sẽ luôn luôn mặc định cho bất kỳ màu sắc cụ thể nào. Điều này có nghĩa không? Có phải bất cư thứ gì như thế này đều được? Nếu không, cách tốt nhất để xử lý điều này là gì? Một Mixin?

Cảm ơn!

Answer 1

Tôi muốn sử dụng một mixin:

@mixin link($color) { 
    a { color: $color}; 

    &:hover { color: darken($color, 10%) }; 
} 

.foo { 
    @include link(green); 
} 

rendered CSS:

.foo a { color: green; } 

.foo a:hover { color: #004d00; } 

Answer 2

gì bạn hỏi là không thể với Sass. SASS không xây dựng một mô hình đối tượng với tất cả các phần tử và các thuộc tính (không thể không có HTML).

Một mixin là một giải pháp thích hợp cho một trường hợp tái sử dụng, nhưng đối với một trường hợp đặc biệt, nó là quá mức cần thiết.

Chỉ cần sử dụng một biến:

a { 
    $link-color: green; 
    color: $link-color; 

    &:hover { 
    color: darken($link-color, 10%); 
    } 
} 

Lưu ý rằng bạn có thể chuyển biến thành một phần riêng biệt, nơi bạn lưu trữ tất cả các biến của bạn.