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) '!';
}

<figure data-before="Hello" data-after="world"></figure>

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 { ... }
...

Answer 2

It isn't possible to directly pass parameters using just CSS but you're not the first person to ask - check out this question which looks at CSS and JavaScript options and also this might be helpful regarding attribute selection.

This will only help if you are looking at a few variables of margin-top but I don't know what context you're using this in. Depending on what you're using it for there might be better ways.

The simplest way would probably be just to add the style inline to your span <span style="margin-top:10px"> but I try to stay away from inline CSS!

Answer 3

Nowdays you can use CSS variable inside a style attribute instead generating a specific class:

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.

Custom properties are subject to the cascade and inherit their value from their parent.

example

  span {
  display: block;
  margin-top: var(--m-t);
}

html {
  background: repeating-linear-gradient(to bottom, transparent, 10px, lightgrey 10px, lightgrey 20px);} /* see 10px steps  */

<span style="--m-t:50px">one</span>
<span style="--m-t:85px">two</span>
<span style="--m-t:110px;">three</span>

Answer 4

no your code is wrong but you can write css inside the tag

*<span style="margin-top:Xpx;">*

Answer 5

Maybe you are looking for SCSS or LESS. It have mixins, variables, etc, and it autocompile real and long css. It was maded to this purposes and write less and less css with the same result.

http://sass-lang.com/guide

http://lesscss.org/

 @size: 10px;
 .class { font-size: @size;  }

Good luck!