Setting css class with variable in Xaringan with remark.js

Question

I often need to change dynamically the font size or other properties for xaringan slides. Instead of defining a lot of different CSS classes I would like to define a general fontsize class and then passing a % value as variable. Something like this https://stackoverflow.com/a/17894116/9032257:

# Header 1

.fontsize50[
- some text
- some text
]

But fontisize50 is not hard coded on the CSS file. Is that possible?

Update

I have tried to use the approach proposed on Remark documentation https://github.com/gnab/remark/issues/72#issuecomment-62225566. I am able to dynamically the font size of a single word but not applying the font-size property to an entire section.

Adding this function to a macro.js file and setting the beforeInit YAML:

remark.macros.fontsize = function (size = "100%") {
  var txt = this;
  tag = "<span style=" + "'font-size:" + size + "'>" + txt + "</span>";
  return tag
};

Then using this:

# Header 1

<!-- This Works -->

Hello ![:fontsize 200%](World)!

<!-- This Not -->

Hello ![:fontsize 200%](

- bullet 1
- bullet 2
- bullet 3

)

Change the fontsize according to the percentage only in the first case. I would like to have the same behavior as having a CSS class:

.font50 {
   font-size: 50%;
}

And then using:

Hello

.font50[

- bullet 1
- bullet 2
- bullet 3

]

But I am not able to do this.