Can a CSS class inherit one or more other classes?

css

Solution

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Problem

Is it possible to make a CSS class that "inherits" from another CSS class (or more than one). For example, say we had: ``` .something { display:inline } .else { background:red } ``` What I'd like to do is something like this: ``` .composite { .something; .else } ``` where the ".composite" class would both display inline and have a red background

Original source

Related problems