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

Question

I'm still learning the variable scopes and rendering order of AEM. I have this trivial problem where I would like to take an integer input from my dialog box, and set that value as the padding of a specified 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;
}

The WCMUse properties for the component are outside less' scope, but I don't know the best-practice to accomplish this would be.

I've tried directly injecting Javascript into less, but this doesn't compile correctly and just transforms the function into a string.

padding-2.less

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

compiles to this:

client-libs.css

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

Answer 1

As such there is no direct way of passing attributes/variables to CSS, you could use JQUERY to do this, that said I am not sure why would you want to give authors flexibility to change the design of a component. Its neither their role to do it nor how an AEM component should be implemented.

Each component adheres to a design, in case you are looking for a way to support different designs for a same component there are other ways to do it all of which will require you to have different CSS classes for each configurations. Once you have done that you can provide authors a predefined choice of design of the component to pick from. This can be done in two ways -

1. Like RichText components allows for style classes to be applied, you can provide same behavior to author by providing a drop down for different styles that are supported for the component.

2. You could use concept of choosing a design via providing options for the view (as it happens in the OOTB List component). Each option maps to a component script that have implementation for a specific design.