SASS Customize Class Names with Variables

Question

Is there any way to customize the variables in SASS? For example:

.m-b-{$number} {
    margin-bottom: $number;
}

If I give class="m-b-50" to an element, it should take margin-bottom 50. I just want to know if it is possible with SASS.

Answer 1

Yes it is possible with the help of variable interpolation or variable substitution which uses #{} for variable substitution in SASS and mixins which is a block of code just like function.

Interpolation is the process of evaluating an expression or a string containing one or more variables, yielding a result in which the variables are replaced with their corresponding values.

Simple example of interpolation and set values to the css property in SASS:

$number:60;
$n: 20px;

.m-b-#{$number}{
  margin-bottom: #{$number}px;
  margin-top: $n;
}

To create customize class names, will use mixins:

@mixin margin-class($side, $number) {
  $firstLetter: str-slice($side, 0, 1);
  .m-#{$firstLetter}-#{$number}{
     margin-#{$side}: #{$number}px;
  }
}

$margins: (10, 20);
$sides: ("top", "right", "bottom", "left");
@mixin generate-margin(){
   @each $margin in $margins{
      @each $side in $sides{
        @include margin-class($side, $margin);
      }
   }
}

@include generate-margin();

Here, generate-margin() will get executed which will call margin-class() for each $margins and $sides, and will generate the below CSS classes:

.m-t-10 {
  margin-top: 10px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-l-20 {
  margin-left: 20px;
}

That's the one way when you want only for specific values, but if you want to create margin class for 0-20, you can loop thru 0 to 20 as shown below:

@mixin generate-margin(){
  @for $margin from 1 through 20{
    @each $side in $sides{
      @include margin-class($side, $margin);
    }
  }
}

Answer 2

For anyone else facing this issue, here is how one can achieve this:-

@for $i from 1 through 10 {
  .mb-#{$i} {
     margin-bottom: #{$i}rem;
  }
}