Question

I’m not sure what to call this, but basically let’s say I have a style that I use a lot,

.somepattern{
    font-size:16px;
    font-weight:bold;
    border:2px solid red;
}

but sometime I want to change the font-size and the color for border. Is it possible to treat this code as a library, where I can set the style to a div

<div class="somepattern">Text</div>

but still control the 16px and red like we do with functions?

Answer 1

You can’t programatically control CSS from your markup, but you can use one of the many CSS extensions to make CSS work more like a compiled language.

http://lesscss.org/

http://sass-lang.com/

If we wrote your example in LESS, we’d get something like this:

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

And then you could use it in your LESS file like so:

.myclass {
    .somepattern(green, 20px);
}