支持查询的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;}