基于背景的边框颜色

梅2020-03-24

我经常趁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属性设置颜色吗？

十三Jim2020/03/24 19:12:31

正如已经说过的，我会这样做的，但是安全重置为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

老丝阿飞2020/03/24 19:12:31

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

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

请参阅此jsfiddle作为示例。

Gil2020/03/24 19:12:31

我会这样使用mixin：

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

这样，您可以轻松地为任何颜色添加深色边框样式：

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

使用相同的想法，甚至更简单（或至少更干燥）：

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer