如何将组件 属性 值传递给该组件的 css/less 客户端库？ AEM 6.2

How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

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

padding/padding.html:

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

padding/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;
}

编译为：

客户端-libs.css

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

因此没有将 attributes/variables 传递给 CSS 的直接方法，您可以使用 JQUERY 来执行此操作，也就是说我不确定您为什么要给作者可以灵活地更改组件的设计。这既不是他们的职责，也不是应该如何实施 AEM 组件。

每个组件都遵循一个设计，如果您正在寻找一种方法来支持同一组件的不同设计，还有其他方法可以做到，所有这些都需要您有不同的 CSS 类 每个配置。完成后，您可以为作者提供预定义的组件设计选择以供选择。这可以通过两种方式完成 -

  1. 就像 RichText 组件允许应用样式 类 一样，您可以通过为组件支持的不同样式提供下拉列表来为作者提供相同的行为。

  2. 您可以使用通过为视图提供选项来选择设计的概念（就像在 OOTB 列表组件中发生的那样）。每个选项都映射到一个组件脚本，该脚本具有针对特定设计的实现。