CSS property value from class name

Question

It is possible to pass parameters for CSS in class name? For example:

.mrg-t-X {
   margin-top: Xpx;
}

Answer 1

No it isn't. The closest we have to this is the attr() function, but that only works within the content property:

figure::before {
  content: attr(data-before) ', ';
}

figure::after {
  content: attr(data-after) '!';
}

Perhaps one day this will be expanded so that we can use it elsewhere, but for now this isn't possible.

Currently as I'm sure you're aware if you want to be able to use the .mrg-t-X class, you'll need to define separate style rules for each X you wish to allow:

.mrg-t-1 { ... }
.mrg-t-2 { ... }
.mrg-t-3 { ... }
...