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