基于背景的边框颜色

Question

我经常趁darken并lighten在我的SASS风格.我目前正在写一个有边框的课程,但是依赖于另一个课程的背景颜色.我想要做的是将边框颜色设置darken为元素的背景颜色.

像这样的东西:

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

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

那么标记将是:

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

当然,如果我按照这里写的那样工作,我不会在SO上发布这个问题:)

所以问题是:我可以动态地border在background属性上添加颜色,如果是,那么如何？

Answer 1

虽然不是SASS解决方案,但您可以使用rgba.

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

以此jsfiddle为例.

Answer 2

我会像这样使用mixin:

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

这样,您可以轻松地为任何颜色添加黑暗边框样式:

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

使用相同的想法甚至更简单(或者更多DRY):

.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;
}