如何在不更改边框颜色的情况下更改边框的不透明度

Question

当使用SCSS禁用输入边框时，我将更改其不透明度。但是边框颜色来自变量：

$borderColor: #5985dc;

.my-input {
  border: 1px solid $borderColor;
}
.my-input:disabled {
  border-color: ???;
}

...还是有什么方法可以将颜色更改为半透明版本？

Answer 1

您可以使用Sass的rgba()函数。它可以采用十六进制颜色值和不透明度值，然后将其转换为RGBA：

$borderColor: #5985dc;

.my-input {
  border: 1px solid $borderColor;
}
.my-input:disabled {
  border-color: rgba($borderColor, 0.5);
}