css - 支持查询的 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 不支持这样的查询。也许扩展它是最好的方法？那么如何扩展呢？

更新：我发现less'作者决定放弃这个功能：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`;
}