Имя класса переменной SCSS

На моем веб-сайте я постоянно делаю стиль = "font-size: #ofpx;". Тем не менее, мне было интересно, есть ли способ сделать это с помощью scss, чтобы при объявлении класса он также изменил размер шрифта. Например:

<div class='col-lg-4 font-20'>whatever here</div>

и это изменит мой размер шрифта на 20. Если бы я сделал font-30, это изменило бы мой размер шрифта до 30 и т.д....

Что я до сих пор:

.font-#{$fontsize} {
      font-size: $fontsize;
}

Ответ 1

Это не может быть сделано для произвольных размеров. Природа SCSS заключается в том, что его нужно свести к CSS, прежде чем он будет применен к HTML. Однако, по сути, вы должны создавать правила во время выполнения, а не во время компиляции.

То, что вы просите, это также запах кода. Пахнет, как будто ваша разметка недостаточно семантическая. Целью CSS-класса является группирование объектов с похожими характеристиками, но вы вместо этого используете их для описания стилей, которые они передают. Я бы предложил отступить и пересмотреть то, что вы действительно хотите.

Очевидно, у вас есть детали определенных элементов, которые зависят от контекста. Например, возможно, вы применяете эти правила к кнопкам, когда хотите сделать их меньше или больше, чем обычно. Вам нужно определить сценарии, в которых кнопки меняются. Может быть, они на 20% меньше, если они находятся в модальном диалоге? Затем напишите свои обычные правила .button, а также создайте правила для .modal .button, которые уменьшат его.

Если вы уверены, что хотите определить размер шрифта для каждого элемента в HTML, просто продолжайте использовать встроенные стили. Единственная причина, по которой не одобряется встроенное моделирование, заключается в том, что он сочетает модель и логику представления таким образом, что наносит вред повторному использованию; однако то, что вы запрашиваете, делает это точно так же. Это то, для чего были созданы встроенные стили. Не изобретай велосипед заново.

После всего сказанного вы можете использовать циклы sass для автоматического создания классов для целых чисел в диапазоне. Например:

/* warning: this is generally a bad idea */
@for $i from 1 through 100 {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}

Это не очень хорошая идея. С практической точки зрения, она не дает никаких преимуществ по сравнению только с использованием встроенных стилей, и с большими диапазонами ваш результирующий файл будет больше (что влияет на время загрузки сайта).

Ответ 2

Просто добавлю, что миксины - это здорово, но если вы хотите использовать класс util (присоедините класс к элементу, примените к нему тот размер шрифта, выполните цикл for в SCSS следующим образом).

@for $i from 1 through 4 {
    $fontsize: 10px * $i;
    .font-#{$i} { 
        font-size: $fontsize;
        }
}

компилируется в

.font-1 {
  font-size: 10px;
}

.font-2 {
  font-size: 20px;
}

.font-3 {
  font-size: 30px;
}

.font-4 {
  font-size: 40px;
}

Если вы хотите, чтобы класс соответствовал количеству пикселей...

@for $i from 1 through 4 {
    $base: 10;
    $fontsize: $base * $i;
    .font-#{$fontsize} { 
        font-size: $fontsize + 0px;
        }
}

Который компилируется в

.font-10 {
  font-size: 10px;
}

.font-20 {
  font-size: 20px;
}

.font-30 {
  font-size: 30px;
}

.font-40 {
  font-size: 40px;
}

Пример кодепа.

Ответ 3

Конечно, теги inline style - это плохая форма. Итак, да, вы должны добавить несколько классов для размера шрифта или просто установить размер шрифта на элементы, которые вам нужны, когда вы идете. Вам решать. Если вы хотите, вы можете использовать микшину так:

@mixin font-size($size) {
  font-size: $size;
}

.some-div { @include font-size(10px); }

Но это, вероятно, излишнее, если вы не получите группу правил, которые обычно идут вместе.

Ответ 4

Вы можете использовать mixins как это

    @mixin font($fontsize) {
      font-size: $fontsize;
    }

    .box { 
        @include font(10px); 
    }

Ответ 5

Только для тех из вас, кто мог бы наткнуться на этот вопрос в более недавнее время и новичок в FrontEnd Development.

То, что сказал Вудро Барлоу об использовании встроенных стилей вместо классов, специфичных для правил, не совсем современное мнение. Например, Bootstrap имеет некоторые из них, и Tachyons полностью построен на них. На самом деле эта практика называется Atomic CSS или Functional CSS.

Это лучше объяснил Джон Полачек в своей статье о хитростях CSS: https://css-tricks.com/lets-define-exactly-atomic-css/