A CodePen by kaelifa. Setting colour opacity using rbga - A function where I can set the RGB colour value once as a variable and then amend the opacity on a case-by-case basis

index.html

<div class="example-colour75">
  <p>Example colour with 75% opacity</p>
</div>

<div class="example-colour50">
  <p>Example colour with 50% opacity</p>
</div>

<div class="example-colour25">
  <p>Example colour with 25% opacity</p>
</div>

style.scss

@import "compass";
@function colourOpacity($opacity, $a) {
  @return rgba(
		nth(append($a, $opacity), 1),
		nth(append($a, $opacity), 2),
		nth(append($a, $opacity), 3),
		$opacity
	);
}

$color-example: 11,72,107;

.example-colour75 {
  background: colourOpacity(0.75, $color-example);
}

.example-colour50 {
  background: colourOpacity(0.5, $color-example);
}

.example-colour25 {
  background: colourOpacity(0.25, $color-example);
}