Feat: Add Opacity Classes

[NickDJM]

Some times we need to change the opacity of objects. Having a class for this would be super convenient.

Solution

Have a classes like width is in base bootstrap where we would just use .o-25, .o-50, etc.

We can use opacity: x for all modern browsers and filter: alpha(opacity=x) for IE 8 and below.

Mixin

@mixin opacity-variant ($parent, $value) {
  $percent: $value / 100;

  #{$parent}-#{$value} {
    opacity: $percent;
    filter: alpha(opacity=$value);
  }
}

Utility

@include opacity-variant('.o', 0);
@include opacity-variant('.o', 25);
@include opacity-variant('.o', 50);
@include opacity-variant('.o', 75);
@include opacity-variant('.o', 100);

Alternatives

Fully spell out the class to be more descriptive: .opacity-25