Sass @each and @if/else mixin snippet?

Question

i am very newbie about Sass and i am trying to get CSS like this;

.heading-lg { 
font-size: 11.2rem;}

.heading-md { 
font-size: 11.2rem;}

.heading-sm { 
font-size: 11.2rem;}

And here's my SCSS Code. But all heading-xx classes gets 11.2rem. Can anyone please show me the way? Thanks a lot.

$font-size: 1.6rem;
$heading-size: .8rem;
$heading: lg md sm;
$heading-lg: lg;
$heading-md: md;
$heading-sm: sm;

@each $size in $heading {
    .heading-#{$size} {

        @if $heading-lg==lg {
            font-size: $font-size + $heading-size * (12);
        }
        @else if $heading-md==md {
            font-size: $font-size + $heading-size * (10);
        }
        @else {
            font-size: $font-size + $heading-size * (8);
        }
    }
}

What output are you looking for ? – Quentin Veron Sep 16 '18 at 22:32 — Quentin Veron, Sep 16 '18 at 22:32

score 0 · Accepted Answer · answered Sep 17 '18 at 01:36

You should use $size variable instead of $heading-lg. As above your code, the $heading-lg in @each always equals lg, so results your issue.

@each $size in $heading {
    .heading-#{$size} {

        @if $size==lg {
            font-size: $font-size + $heading-size * (12);
        }
        @else if $size==md {
            font-size: $font-size + $heading-size * (10);
        }
        @else {
            font-size: $font-size + $heading-size * (8);
        }
    }
}

score 0 · Answer 2 · answered Sep 17 '18 at 07:03

Another good solution is to use the maps: maybe it's more readable ('cause you immediately associate key-value) and you do not have to use the @if statement inside your @each loop:

$font-size: 1.6rem;
$heading-size: .8rem;

$heading-list: (
  lg:12,
  md:10,
  sm:8
);

@each $key, $value in $heading-list {
  .heading-#{$key} {
    font-size: $font-size + $heading-size * ($value);
  }
}

Sass @each and @if/else mixin snippet?

2 Answers2