jcropp
jcropp

Reputation: 1246

how to group CSS class settings

Is it possible to combine groups of class settings similar to how groups of settings can be combined for @media? In other words, instead of doing this:

h1.subtitle,
h2.subtitle,
h3.subtitle,
h4.subtitle,
h5.subtitle,
h6.subtitle,
.h1.subtitle,
.h2.subtitle,
.h3.subtitle,
.h4.subtitle,
.h5.subtitle,
.h6.subtitle {
  margin-top:0;
}

I’d like to do something like this:

.subtitle {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    margin-top:0;
  }
}

Upvotes: 0

Views: 84

Answers (2)

hidanielle
hidanielle

Reputation: 594

With Sass or Less, you could do something like this

h1,
h2,
h3,
... {
 &.subtitle {
  margin-top:0;
 } 
}

Which would output to

h1.subtitle,
h2.subtitle,
h3.subtitle,
... {
  margin-top:0;
}

Upvotes: 1

Niels
Niels

Reputation: 49919

You can use less CSS or SASS to do that as a pre compiler. But than it will generate it like this:

.subtitle h1 {} 
.subtitle h2 {}
...

Otherwise it is not possible.

Note: You don't have to use the type in front of a class.

Upvotes: 2

Related Questions