altek altek - 2 months ago 19
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

You can write mixin that generates set of classes:

Scss:

$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.