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

- Alex Netkachov

Answer 1

你需要更加间接一些。定义一个变量并使用它，像这样：

@topPad: 12px;

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

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

- ScottS

---

我知道lesscss能做什么，也对它不能做的感兴趣。 - Alex Netkachov

@AlexAtNet--抱歉。在这个网站上，人们知道或不知道什么是不确定的。在我看来，你似乎只需要做一些变量设计的事情。 - ScottS

Answer 2

我还没有测试过这个，但你可能可以使用LessCSS内置的JavaScript解析来获得你需要的内容。

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

- AndrewR

---

谢谢。这个解决方案接近我想要的，但是我不能使用它，因为文件是通过nodejs处理的。 - Alex Netkachov