How to change the opacity of the border without changing its color

Question

I'm going to change opacity of input's border when it's disabled using SCSS. But border color is coming from variable:

$borderColor: #5985dc;

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

... or is there any way to change the color to half-transparent version?

Answer 1

You can use Sass's rgba() function. It can take a hex colour value and an opacity value, and convert it to RGBA:

$borderColor: #5985dc;

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