Howtochangetheopacityoftheborderwithoutchangingitscolor

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?

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