Создание динамического класса CSS ех .font-размер {размер шрифта: размер}

Question

Можно создавать динамические классы CSS шрифта, такие как в названии, где size в .font-size стать параметр, используемый в качестве size:

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

и вы могли бы добавить

<p class="font-14"> 

, который бы назвал

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

Answer 1

Если вы хотите динамически генерировать объявления шрифтов CSS с соответствующими классами, вы должны посмотреть на CSS Preprocessors, например или LESS.

Вот пример с SCSS:

@for $i from 14 through 30 { 
    .font-#{$i} { 
    font-size: $i + px; 
    } 
} 

Это Выведет:

.font-14 { font-size: 14px; } 
.font-15 { font-size: 15px; } 
.font-16 { font-size: 16px; } 
... 
.font-30 { font-size: 30px; }