Ben Clayton Ben Clayton - 1 month ago 21
Sass (Sass) Question

Sass - Class name wildcard

Is it possible to have a wildcard class name?

for example i have a few divs

.div-one
,
.div-two
,
.div-three
etc
Is there a way for me to use the below in sass to select all the divs with that name or is it best just to give one class that covers all and unique classes on each?

.div-*{}

Answer

You may use this method to do. Create a mixin:

@mixin myDIV($name, $color, $color-hover) {
    .div-#{$name} {
        a {
            color: #{$color};
            &:focus, &:hover {
                color: #{$color-hover};
            }
        }
    }
}

Usage:

@include myDIV('one', $blue, $blue-hover);
@include myDIV('two', $green, $green-hover);
@include myDIV('three', $red, $red-hover);

You may change the variables ($blue) and css properties to suits your styles.