While not a SASS solution, you could just use rgba.
.border {
border: 2px solid rgba(0,0,0, 0.25);
}
See this jsfiddle as an example.
Question
I frequently take advantage of darken
and lighten
in my SASS styles. I'm currently writing a class which will have a border, but will depend on another class for background color. What I want to do is set the border color to a darken
of the element's background color.
Something like this:
.blue { background: #00f; }
.red { background: #f00; }
.border { border: 2px solid darken(background, 20); }
Then the markup would be:
<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>
Naturally, if this worked as I have it written here, I wouldn't be posting this as a question on SO :)
So the question is: Can I base a border
color on the background
attribute dynamically, and if so, how?
Solution
While not a SASS solution, you could just use rgba.
.border {
border: 2px solid rgba(0,0,0, 0.25);
}
See this jsfiddle as an example.
OTHER TIPS
I would use a mixin like this:
.darkenBorder(@color) {
&.border {
background: darken(@color, 20);
}
}
That way, you can easily add a darkened border style to any color:
.blue { background: #00f; .darkenBorder(#00f); }
.red { background: #f00; .darkenBorder(#f00); }
Even simpler (or more DRY at least), using the same idea:
.colorStyles(@color) {
background: @color;
&.border {
background: darken(@color, 20);
}
}
.blue { .colorStyles(#00f); }
.red { .colorStyles(#f00); }
.blue {
background: #00f;
}
.blue.border {
background: #000099;
}
.red {
background: #f00;
}
.red.border {
background: #990000;
}
as already said, i would go for this, but with a safe reset of 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 */
}
see this as a reminder of use of rgba() colors , as hsla() colors
There are 2 ways to darken border color (currently - no sass).
rgba()
.birghtness()
with opacity()
..box {
border: 5px solid rgba(100, 100, 100, 1);
filter: brightness(.72) opacity(.7);
}
Full example: https://jsfiddle.net/3qwo85js/2/
Image preview