Как сделать такую переменную?

Question

Как сделать такую переменную?

Рейтинг: 0Ответов: 2Опубликовано: 28.01.2023

Хочу сделать такую переменную, что если я в классе писал скажем вот так <div class="fs-18">text</div> то нужно чтобы это вот число он сам подставлял в font-size. Подскажите, возможно ли это сделать и если да, то как?

css веб-программирование scss

Источник: Stack Overflow на русском

Answer 1

▲ 1

Можно задействовать CSS-переменную:

.fs {
  font-size: var(--fs);
}

<div class="fs" style="--fs: 16px">Text</div>
<div class="fs" style="--fs: 20px">Text</div>
<div class="fs" style="--fs: 24px">Text</div>
<div class="fs" style="--fs: 28px">Text</div>
<div class="fs" style="--fs: 32px">Text</div>

Хотя, с таким же успехом, можно сразу вписать font-size в style. Целесообразность подхода зависит от того, будет ли участвовать переменная еще в каких-либо вычислениях.

Либо, как отметил @OliverPatterson, определять каждый класс:

.fs-16 { font-size: 16px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }

<div class="fs-16">Text</div>
<div class="fs-20">Text</div>
<div class="fs-24">Text</div>

Answer 2

▲ -1

Ну можно вот так:

let fontSizeEls = document.querySelectorAll('[class*="fs-"]')

for (let i = 0; i < fontSizeEls.length; i++) {
  let fontSizeEl = fontSizeEls[i]
  let classes = fontSizeEl.className.split(' ')

  for (let j = 0; j < classes.length; j++) {
    let currentClass = classes[j]

    if(currentClass.match(/^fs\-\d+$/) !== null) {
      let fontSize = currentClass.split('-')[1]

      fontSizeEl.style.fontSize = fontSize + 'px'
    }
  }
}

<div class="fs-10">text</div>
<div class="fs-25">text</div>
<div class="fs-42">text</div>
<div class="fs-50">text</div>
<div class="fs-75">text</div>
<div class="fs-100">text</div>

Объяснение

Сначала по селектору выбираем все элементы у которых в атрибуте class, есть fs-, дальше проходимся по этим самым элементам, а уже на каждой итерации проходимся по классам, если класс начинается и заканчивается на fs-КАКОЕТОЧИСЛО, тогда выбираем число после символа -, и используем его в качестве размера шрифта.

Как сделать такую переменную?

Ответы

Объяснение