altek altek - 1 year ago 80
Sass (Sass) Question

Dynamic class that accepts arguments using Sass

I'm looking for something that would use this:

<p class="fs12">Example with font size 12</p>
<p class="fs14">Example with font size 12</p>

To assign the paragraphs with the font size based on the number after 'fs'. I'm not sure if there's anything that does that in SASS. It would be something between a mixin and a class I guess.

@class fs($size) {
font-size: $size;

If not possible I would like to know if there is any other approach to this, either other preprocessor or if this is not a good practice at all.

Answer Source

You can write mixin that generates set of classes:


$font-sizes: 12, 14, 16;

@each $font-size in $font-sizes {
  .fs-#{$font-size} {
    font-size: #{$font-size}px;

Output css:

.fs-12 {
  font-size: 12px;

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

.fs-16 {
  font-size: 16px;

Sassmeister demo.

But as you assume it is not good practice to use class names that describe css properties.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download