Question

I want to define some basic styles that I can combine. Let’s say I have a stylesheet that contains the following lines:

.whitebackground  {background-color: #ffffff}
.borderblue       {border: solid 1px #0000aa}

I’m wondering if there is there a way to include these lines into a new line? Something like:

**div.main   {.whitebackground; .borderblue}**

The result must be the same as it would be with this line:

div.main  {background-color: #ffffff; border: solid 1px #0000aa}

Answer 1

You are looking for SASS or LESS library.

They will allow you to include style declaration from one selector to the other.

Using LESS, you syntax will be perfectly valid and work as you want

div.main   {
   .whitebackground; 
   .borderblue;
}

But, when they are compiled, it will take the optimized form automatically.