Colore bordo basato su sfondo

Question

Spesso utilizzo i codici darken e lighten nei miei stili SASS. Attualmente sto scrivendo una classe che avrà un bordo, ma dipenderà da un'altra classe per il colore di sfondo. Quello che voglio fare è impostare il colore del bordo su un darken del colore di sfondo dell'elemento.

Qualcosa di simile a questo:

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

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

Poi il markup sarebbe:

<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> 

Naturalmente, se questo ha lavorato come ce l'ho scritto qui, non sarei postando questo come una domanda su SO :)

Quindi la domanda è: Posso basare un colore border sull'attributo backgroundDynamica leal, e se sì, come?

Answer 1

Sebbene non sia una soluzione SASS, è possibile utilizzare rgba.

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

Vedere questo jsfiddle come esempio.

Answer 2

vorrei utilizzare un mixin come questo:

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

In questo modo, è possibile aggiungere facilmente uno stile di bordo oscurato per qualsiasi colore:

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

---

Ancora più semplice (o più SECCO almeno), usando la stessa idea:

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

---

uscita:

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

Answer 3

come già detto, vorrei andare per questo, ma con un reset sicura di 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

---

vedono questo come promemoria per l'uso dei colori rgba(), a s hsla() colors