Question

So let’s say I have the following in ‘foo.css’:

.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

Now let’s say that I have two divs I want borders for, so I do:

<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

This works fine, but I find that when defining #foo and #bar in my css file, I would rather give them the characteristics of .border than give the div’s the class, like so:

.border { border : solid 1px; }
#foo {
  <incantation to inherit from .border>
  color : #123;
}
#bar {
  <incantation to inherit from .border>
  color : #a00;
}

and then my html would just be:

<div id="foo">Foo</div>
<div id="bar">Bar</div>

Anybody know what that magic incantation is?

Answer 1

You might be interested in mixins with Sass. Sass lets you write css style sheets in a more efficient way, using tricks like this. Mixins let you define a group of attributes (say, to do with borders), and then include those attributes within certain css classes.