CODEWITHSUNDEEP
sass
Oswaldo
Oswaldo

Reputation: 3386

Concatenate multiple classes with SASS Ampersand (&) operator

I have a function that returns a list of classes and since this function is out of context here let's assume the returned value is:

$classes: '.class1, .class2';

I want to generate the following CSS:

.main-class.class1, .main-class.class2 {
  color: white;
}

I tried this:

.main-class {
  &#{$classes} {
    color: white;
  }
}

But the output is:

.main-class.class1, .main-class. class2 {
  color: white;
}

I know that doing the following works:

.main-class {
  &.class1, &.class2 {
    color: white;
  }
}

however the class names class1 and class2 are dynamic and must come from a variable like above.

Upvotes: 1

Views: 875

Answers (1)

Oswaldo
Oswaldo

Reputation: 3386

I got it by using selector-append this way:

$classes: '.class1, .class2';

.main-class {
  @at-root #{selector-append(&, $classes)} {
    color: white;
  }
}

output CSS:

.main-class.class1, .main-class.class2 {
  color: white;
}

Upvotes: 1

Related Questions