支持查询的CSS预处理器

Question

我需要以下功能：

/* 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不支持此类查询。也许延长它将是一个最好的方式？那么如何扩展呢？

更新：我发现'作者较少'决定放弃此功能：https://github.com/cloudhead/less.js/issues/6

Answer 1

你必须更加间接。定义一个变量并使用它，如下所示：

@topPad: 12px;

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

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

Answer 2

我没有机会对此进行测试，但您可以使用LessCSS内置的javascript解析来获取所需内容。

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