CSS – Group Multiple selectors to apply to one ID

Question

Question by Paul

We wish to setup a mobile stylesheet for a client – we can only include one stylesheet due to the system setup.

Each page has an ID and due to the design of the site we would like to be able to target elements in each page slightly differently.

I know we can do this by targeting classes via #home .classname{}, but wondered if there was any way to group a bunch of classes under one prefix rather than individually such as –

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 }

I’ve never read anything about this, just thought it’s something that would be really useful in our case and has probably been thought about in the past?

Cheers
Paul

Answer 1

Answer by Starx

Starx

You are looking for CSS Extension Library. The two most popular are:

LESS
SASS

Using either one of them, you can combine your style in this way

#home{
  .classname1;
  .classname2;
  .classname3;
 }

CSS – Group Multiple selectors to apply to one ID

Question by Paul

Answer by Starx

Author: Nabin Nepal (Starx)

Please fill the form - I will response as fast as I can!