Styling of an element such as background color does not affect the margin. Padding is affected by the styling of an element, such as background color.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With