Màu đường viền dựa trên nền

Question

Tôi thường tận dụng lợi thế của darken và lighten trong các kiểu SASS của mình. Tôi hiện đang viết một lớp mà sẽ có một biên giới, nhưng sẽ phụ thuộc vào một lớp khác cho màu nền. Điều tôi muốn làm là đặt màu đường viền thành màu darken của màu nền của phần tử.

Something như thế này:

.blue { background: #00f; } 
.red { background: #f00; } 

.border { border: 2px solid darken(background, 20); } 

Sau đó, đánh dấu sẽ là:

<div id="colored-box" class="blue border"> 
    <p> 
    I have a dark blue border! 
    </p> 
</div> 

<div id="colored-box" class="red border"> 
    <p> 
    I have a dark red border! 
    </p> 
</div> 

Đương nhiên, nếu điều này làm việc như tôi đã nó viết ở đây, tôi sẽ không được gửi bài này như một câu hỏi trên SO :)

Vì vậy, câu hỏi là: Tôi có thể đặt một màu border trên thuộc tính backgrounddynamica không lly và nếu có thì làm cách nào?

Answer 1

Trong khi không phải là giải pháp SASS, bạn chỉ có thể sử dụng rgba.

.border { 
    border: 2px solid rgba(0,0,0, 0.25); 
} 

Xem ví dụ jsfiddle làm ví dụ này.

Answer 2

Tôi sẽ sử dụng một mixin như thế này:

.darkenBorder(@color) { 
    &.border { 
     background: darken(@color, 20); 
    } 
} 

Bằng cách đó, bạn có thể dễ dàng thêm một phong cách biên giới tối với bất kỳ màu sắc:

.blue { background: #00f; .darkenBorder(#00f); } 
.red { background: #f00; .darkenBorder(#f00); } 

---

Thậm chí đơn giản (hoặc khô hơn ít nhất), sử dụng cùng một ý tưởng:

.colorStyles(@color) { 
    background: @color; 
    &.border { 
     background: darken(@color, 20); 
    } 
} 
.blue { .colorStyles(#00f); } 
.red { .colorStyles(#f00); } 

---

Output:

.blue { 
    background: #00f; 
} 
.blue.border { 
    background: #000099; 
} 
.red { 
    background: #f00; 
} 
.red.border { 
    background: #990000; 
} 

Answer 3

như đã nói, tôi sẽ đi cho điều này, nhưng với một thiết lập lại an toàn của background-clip;:

.border { border: 2px solid rgba(0,0,0,0.2);/* set here opacity to darken 
to lighten , use rgba(255,255,255,0.X) , any other color can be used too*/ 
background-clip:border-box; /* make sure bg is layed under border */ 
} 

DEMO

---

thấy điều này như một lời nhắc nhở về việc sử dụng các màu rgba(), một s hsla() màu sắc