Is there a way to concatenate CSS class selectors?

Question

This may not be the right wording, which may also be the reason I could not find any answers previously, so my apologies if this is a duplicate.

I am writing a basic CSS framework/guideline that will be used for multiple projects, and I wanted to create a number of classes that will have styles associated with them off the bat in order to make development quicker.

For example, I am looking to be able to do something along the lines of the following:

<div class="flex-column-wrap"></div>

Where I would write an SCSS selector which would accomplish something along the lines of:

.flex {
  display:flex;
  &.-column {
    flex-direction:column;
  }
  &.-wrap {
    flex-wrap:wrap;
  }
  &.-column-wrap {
    flex-direction:column;
    flex-wrap:wrap;
  }
}

I know the & selector would not work in this situation, because it is one class, which is what I was trying to accomplish to not add 3 individual classes, like so <div class="flex column wrap"></div>

Not sure if something like this is possible or if it would just make more sense to write out all of the classes individually. I appreciate any insight into this!

Not really clear what you are trying to achieve :/ Maybe try to put some examples? — Pingolin
– Pingolin, Commented Aug 24, 2019 at 18:58
Why not using Bootstrap 4 (flex based) and add your color theme to it. — bron
– bron, Commented Aug 24, 2019 at 19:03
There are a lot more reasons than just flex based I wanted to use, that was just one example of where I would want to utilize multiple class names that apply different styles, that Bootstrap does not have built in @bron — Vrtx Digital
– Vrtx Digital, Commented Aug 24, 2019 at 19:26
Yep, I'm aware of that. Bootstrap is meant to add your own custom classes to prevent that each site is a BS looking site :) — bron
– bron, Commented Aug 24, 2019 at 19:49

Dracorex · Accepted Answer · 2019-08-24 20:32:51Z

1

Remove the . after each & to get the classes that you want: flex, flex-column, flex-wrap, and flex-column-wrap.

.flex {
  display:flex;
  &-column {
    flex-direction:column;
  }
  &-wrap {
    flex-wrap:wrap;
  }
  &-column-wrap {
    flex-direction:column;
    flex-wrap:wrap;
  }
}

& allows you to take the parent selector and append the following text to it, so &-column in your code will create a CSS rule for .flex-column.

answered Aug 24, 2019 at 20:32

Dracorex

4096 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vrtx Digital Over a year ago

Awesome thank you very much! I didn't realize you could append it like that with the &-!

Collectives™ on Stack Overflow

Is there a way to concatenate CSS class selectors?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related