基于背景色的边框颜色

Question

我经常在我的SASS样式中使用darken和lighten。我正在编写一个类，它将有一个边框，但是会依赖于另一个类的背景颜色。我想做的是将边框颜色设置为元素背景颜色的darken。类似这样：darken($bg-color, 10%)。

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

自然地，如果我写的这样有效，我就不会在stackoverflow上发布这个问题了 :)

所以问题是：我能基于background属性动态地设置border颜色吗？如果可以，如何实现？

- asfallows

Answer 1

虽然不是 SASS 的解决方案，但你可以使用 rgba。

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

可以参考这个jsfiddle。

- user3341679

---

这是最自然的方式。+1 - G-Cyrillus

虽然我喜欢利用SASS mixins，但这绝对是最直接的答案，比其他答案更容易与我的现有样式结合。谢谢！ - asfallows

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

- McGarnagle

Answer 3

正如已经提到的，我会选择这个方案，但在重置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 */
}

演示

---

这是一个有关使用rgba()颜色和hsla()颜色的提醒。

- G-Cyrillus

---

使用RGBA颜色可以轻松地使颜色变浅、变深或添加颜色：http://codepen.io/gc-nomade/pen/wouBe 这只是一个基本的颜色层喷涂悬停任何东西，只是一个提醒而已 :) - G-Cyrillus

Answer 4

有两种方法可以使边框颜色变暗（目前没有sass）。

1. 像@user3341679的答案一样，使用rgba()。
2. 使用过滤器brightness()和opacity()。

.box {
    border: 5px solid rgba(100, 100, 100, 1);
    filter: brightness(.72) opacity(.7);
}

完整示例：https://jsfiddle.net/3qwo85js/2/

图像预览

使用两种CSS方法加深边框颜色。

放大加深边框颜色的图像。

- vee