Opacity setters

Opacity setter classes are practical for any element, you can change the impact an element can have on others by adjusting opacity.

.opacity-0

.opacity-10

.opacity-20

.opacity-30

.opacity-40

.opacity-50

.opacity-60

.opacity-70

.opacity-80

.opacity-90

.opacity-100

Custom helper classes

Note that these classes can be customized in _config.scss file, there is a variable called $OPACITY_LIST, all classes are generated from this list. So it is possible to create customized helper classes for opacity simply!

_config.scss

// This list will be converted to helper classes.
// .opacity-[]
$OPACITY_LIST: (
    0,
    5,
    8,
    10,
    20,
    30,
    40,
    50, 
    55,
    60, 
    70, 
    80, 
    90, 
    100
);