CODEWITHSUNDEEP
htmlcss
Nicolas Manzini
Nicolas Manzini

Reputation: 8546

Create dynamic css class ex .font-size { font-size: size}

Is it possible to create dynamic css font classes such as in the title where size in .font-size become the parameter used as size :

.font-size { 
     font-size: size px;
}

and you could add

<p class="font-14">

which would call

.font-14 {
   font-size: 14px;
}

Upvotes: 1

Views: 709

Answers (1)

web-tiki
web-tiki

Reputation: 103810

If you want to dynamicaly generate the CSS font declarations with the corresponding classes, you should look into CSS Preprocessors like SASS or LESS.

Here is an example with SCSS :

@for $i from 14 through 30 {
  .font-#{$i} {
    font-size: $i + px; 
  }
}

This will output : 

.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
...
.font-30 { font-size: 30px; }

Upvotes: 3

Related Questions