By

文章目录

设计人员往往会根据背景色来决定文字的颜色，如果背景为黑色，文字就会用相应的反色调。如果背景比较亮，则文字常用黑色。因为文字和背景色之间的颜色对比能够让阅读更加容易。
在Sass中我们如何根据给定的背景色来决定文字的颜色呢？
假如我们有如下的HTML:

1
2
3
<p class="notification notification-confirm">Confirmation</p>
<p class="notification notification-warning">Warning</p>
<p class="notification notification-alert">Alert</p>

我们有不同背景颜色的提醒条，我们可以用一个function来计算出对应合适的文字颜色：

1
2
3
4
5
6
7
@function set-notification-text-color($color) {
  @if (lightness($color) > 50) {
    @return #000000; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}

lightness()是Sass中定义的一个function，它返回当前颜色的亮度（0-100），0是最暗的，100代表最亮。
下面看下完整的css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$notification-confirm: hsla(101, 72%, 37%, 1);  // Green
$notification-warning: #ffc53a;                 // Yellow
$notification-alert: rgb(172, 34, 34);          // Red
%notification {
  border-radius: 10px;
  display: block;
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 1em 2em;
  margin: 1em auto;
  width: 30%;
  text-align: center;
}
.notification {
  @extend %notification;
}
.notification-confirm {
  background: $notification-confirm;
  color: set-notification-text-color($notification-confirm);
}
.notification-warning {
  background: $notification-warning;
  color: set-notification-text-color($notification-warning);
}
.notification-alert {
  background: $notification-alert;
  color: set-notification-text-color($notification-alert);
}

如果我们改变背景色，对应的文字颜色也会相应的进行更新。

在css3中，mix-blend-mode属性也可以根据背景色自动的改变文字的颜色，但这个属性目前还没有得到浏览器的普遍支持，下面这个例子需要打开chrome的experimental开关：

文章目录