CODEWITHSUNDEEP
csssasscss-selectors
Jamie Hartnoll
Jamie Hartnoll

Reputation: 7341

How to create comma separated css declarations with SASS

I'm using Bootstrap and SASS to create some coloured ribbons based on Bootstrap theme, using.

@each $color, $value in $theme-colors {
    .ribbon-#{$color} {
        background: theme-color("#{$color}");
    }
}

Generates

.ribbon-primary{
   background: my primary colour
}
.ribbon-secondary{
   background: my secondary colour
}
etc etc

But I have some CSS properties to apply to all, eg:

.ribbon-primary, .ribbon-secondary...{
    display: flex;
}

How do I write that in SASS without repeating it for each theme colour delcaration?

Upvotes: 0

Views: 155

Answers (1)

Simplicius
Simplicius

Reputation: 2095

Use @extend. This will exactly suit your use case. This:

%secretClassToBeExtended {
  display: flex;
}

@each $color, $value in $theme-colors {
    .ribbon-#{$color} {
        @extend %secretClassToBeExtended;
        background: theme-color("#{$color}");
    }
}

Will generate to:

.ribbon-primary, .ribbon-secondary {
   display: flex;
}

.ribbon-primary{
   background: my primary colour
}

.ribbon-secondary{
   background: my secondary colour
}

Upvotes: 3

Related Questions