Clever Geek Handbook

CSS property value from class name

Is it possible to pass parameters to CSS in the class name? For example:

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

      

        
        
        
      

    
<span class="mrg-t-10">Test</span>

In this example, X should be 10.

+3


source to share


4 answers


No, it is not. The closest thing to this is a attr()

function , but this only works on a property content

:

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

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

        
        
        
      

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




Perhaps one day this will be expanded so that we can use it elsewhere, but this is not yet possible.

Currently, since I'm sure you know if you want to use the class .mrg-t-X

, you will need to define separate style rules for each X

you want to allow:

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


source


no wrong code but you can write css inside tag



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


source


It is not possible to pass parameters directly using CSS alone, but you are not the first person interested - check out this question that looks at CSS and JavaScript options, and this one might also be useful when choosing attributes.

It helps if you look at multiple variables margin-top

, but I don't know what context you are using this in. Depending on what you are using for this, there may be better ways.

The simplest way would probably be to just add inline style to your span <span style="margin-top:10px">

, but I try to stay away from inline CSS!

0


source


You may be looking for SCSS or LESS. It has mixins, variables, etc. and it copies real and long css automatically. It was done for these purposes and writing less and less css with the same result.

http://sass-lang.com/guide

http://lesscss.org/

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

Good luck!

0


source






More articles:


All Articles