CSS preprocessor supporting queries

I need the following functions:

/* define rule */
div.primary { padding: 12px 0 0 0; }

/* use it */
div.secondary { @(div.primary, padding-top) }
/* or */
div.secondary { padding-top: @(div.primary).padding-top }

Lesscss does not seem to support such requests. Maybe an extension would be a better way? Then how to expand it?

Update: I found that the less the author decided to abandon this feature: https://github.com/cloudhead/less.js/issues/6

+3
source share
2 answers

You must be more indirect. Define a variable and use it like this:

@topPad: 12px;

/* use it to define rule */ 
div.primary { padding: @topPad 0 0 0; } 

/* use it again */ 
div.secondary { padding-top: @topPad;}
+1
source

I have not had the opportunity to verify this, but you can use LessCSS built into javascript parsing to get what you need.

div.secondary{
   padding-top: `((document.createElement('div')).className='primary').style.paddingTop`;
}
0
source

All Articles