Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Border color based on background

Tags:

People also ask

Does background color affect margin?

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?