How to write css rule with variable to change font-size?

Question

can i do somethinkg like:

.page-text-size-* { font-size: * !important; }

"*" should be replaced on number.

Or i need to use this way:

.page-text-size-10 { font-size: 10px !important;  }
.page-text-size-12 { font-size: 12px !important;  }

I don't think the 1st one will work. but you can use scss to write a mixin for it. http://sass-lang.com/ in SCSS you can do `for loop` and loop through all your size class — aahhaa, Jan 14 '16 at 23:14
[What are the implications of using “!important” in CSS?](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) — GolezTrol, Jan 14 '16 at 23:16

score 1 · Accepted Answer · answered Jan 14 '16 at 23:17

Using only CSS it would only be possible with Mozilla, in which it is still an experimental technology (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) .

But you could use Less (http://lesscss.org) or Sass (http://sass-lang.com) to accomplish it.

score 0 · Answer 2 · answered Jan 14 '16 at 23:35

Using SASS, this is completely possible. Plain CSS doesn't support this kind of thing.

If you want one for every number in a sequence:

@for $i from 1 through 4 {
  .page-text-size-#{$i} {
     font-size: $i;
  }
}

Or if you want only numbers you specify:

$list: 10 20 24 36;

@each $size in $list {
  .page-text-size-#{$size} {
    font-size: $size; 
   }
}

score -1 · Answer 3 · answered Jan 14 '16 at 23:16

-1

First of all dont use !important, its bad practice, answer for your question is simple and placed here LESS

answered Jan 14 '16 at 23:16

Smile0ff

Using !important is only bad practice if you use it incorrectly. It exists for a reason. – James Ives Jan 15 '16 at 00:27
It depends on the project. There are acceptable use cases for !important otherwise it wouldn't exist. I suggest reading this: http://stackoverflow.com/a/3706876/4933483 – James Ives Jan 15 '16 at 00:34

3 Answers3