Possible to pass arguments to CSS classes? [duplicate]

Question

I have a div like this:

<div class="center small-top-margin">
  <%= rails code %>
</div>

where `small-top-margin' is as follows:

.small-top-margin {
    margin-top: 2em;
}

Is there a way to pass an argument to a css class such that

class="top-margin(2) #=> margin-top: 2em;
class="top-margin(5) #=> margin-top: 5em; etc..

or even better

class="margin(top, 2) #=> margin-top: 2em;

I've included Rails tags in case there's a way to do this through rails, although a purely css/sass solution would be better.

Answer 1

No. But you can generate a reasonable number of pre-built classes:

.top-margin-2 {
    margin-top: 2em;
}
.top-margin-5 {
    margin-top: 5em;
}

Then you can generate your HTML with class="top-margin-#{margin}"

This is not usually a good thing, but if you really need it, it's possible. I urge you though to reconsider and ask what you really want; CSS classes should be semantically meaningful, otherwise you might as well directly apply the CSS on the elements' style attribute. What does 2em mean to you? What is 5em?