Блог

Необходимо вызвать var по имени, которое построено. Вот что у меня есть

 $font-size-small:3rem;
$line-height-base:2rem;

$font-size-h1:1rem;
$font-size-h2:2rem;
$font-size-h3:3rem;
$font-size-h4:4rem;
$font-size-h5:5rem;
$font-size-h6:6rem;



@for $i from 1 through 6 {
    $tag: h#{$i};
    $var: font-size-h#{$i};
    $sized: (100% * $font-size-small / #{$var});

    #{$tag}.small, .#{$tag}.small, #{$tag} small {
        font-size: $sized;
    }
}
  

он выводит как

 h1.small, .h1.small, h1 small {
  font-size: 300% / font-size-h1;
}

h2.small, .h2.small, h2 small {
  font-size: 300% / font-size-h2;
}

h3.small, .h3.small, h3 small {
  font-size: 300% / font-size-h3;
}

h4.small, .h4.small, h4 small {
  font-size: 300% / font-size-h4;
}

h5.small, .h5.small, h5 small {
  font-size: 300% / font-size-h5;
}

h6.small, .h6.small, h6 small {
  font-size: 300% / font-size-h6;
}
  

но что мне нужно, так это

 h1.small, .h1.small, h1 small {
  font-size: 300% / 1rem;
}

h2.small, .h2.small, h2 small {
  font-size: 300% / 2rem;
}

h3.small, .h3.small, h3 small {
  font-size: 300% / 3rem;
}

h4.small, .h4.small, h4 small {
  font-size: 300% / 4rem;
}

h5.small, .h5.small, h5 small {
  font-size: 300% / 5rem;
}

h6.small, .h6.small, h6 small {
  font-size: 300% / 6rem;
}
  

Я не нахожу ничего, что не использует map. Проблема в том, что существует множество целых стилей, которые являются ссылочными, ____-6 где это 6 будет похоже на 1-6. Так почему бы просто не создать имя var и не вызвать его.

Вы не можете использовать интерполяцию в имени переменной, другим решением является использование maps и функции для извлечения номера каждого значения для выполнения математических операций:

SASS

 $font-size-small: 3rem;
$line-height-base: 2rem;

$map:(
font-size-h1: 1rem,
font-size-h2: 2rem,
font-size-h3: 3rem,
font-size-h4: 4rem,
font-size-h5: 5rem,
font-size-h6: 6rem
);

@function strip-unit($number) {
    @return $number / ($number * 0   1);
}

@for $i from 1 through 6 {
    $tag: h#{$i};
    $var: map-get($map, font-size-h#{$i});
    $sized: (100% * strip-unit($font-size-small) / #{$var}  );

    #{$tag}.small, .#{$tag}.small, #{$tag} small {
        font-size: $sized;
    }
}
  

Вывод

 h1.small, .h1.small, h1 small {
  font-size: 300% / 1rem;
}

h2.small, .h2.small, h2 small {
  font-size: 300% / 2rem;
}

h3.small, .h3.small, h3 small {
  font-size: 300% / 3rem;
}

h4.small, .h4.small, h4 small {
  font-size: 300% / 4rem;
}

h5.small, .h5.small, h5 small {
  font-size: 300% / 5rem;
}

h6.small, .h6.small, h6 small {
  font-size: 300% / 6rem;
}
  

PS: Я настаиваю на том, что синтаксис for font-size в CSS неверен.