如何将组件属性值传递给该组件的 css/less clientlibs？AEM 6.2的

问：

我仍在学习AEM的变量范围和渲染顺序。我有一个微不足道的问题，我想从我的对话框中获取一个整数输入，并将该值设置为指定类的填充。

padding/padding.html：

<div class="my-padding">Pad me up!</div>

填充/clientlibs/padding.less

.my-padding {
    padding-top:    ${properties.top}px;
    padding-right:  ${properties.right}px;
    padding-bottom: ${properties.bottom}px;
    padding-left:   ${properties.left}px;
}

组件的 WCMUse 属性超出了 less 的范围，但我不知道实现此目的的最佳实践是什么。

我尝试将 Javascript 直接注入 less，但这不能正确编译，只是将函数转换为字符串。

填充-2.less

.my-padding-2{
      padding: `function(){return 10;}` px;
}

编译为：

client-libs.css

...
.my-padding-2{
      padding: function(){return 10;} px;
}
...