MK
Size: a a a
MK
I
ZT
ZT
ZT
АО
Heading и модификаторы Heading_size_s, Heading_size_m. Хочу для ширины экрана от 320px до 360px использовать размер s, а для ширины больше 360px использовать m. Из вариантов я вижу: 1) иметь на странице две копии блока с разными модификаторами, и при помощи @media запроса задавать одному из них display: none; 2) использовать блок только с одним из модификаторов, вместо второго переопределять стили миксом; 3) использовать блок без модификаторов вовсе, и размер задавать миксами на этой странице. Все варианты по-своему плохи. Есть ли какие-то ещё, может быть с использованием какого-нибудь PostCSS?АО
.Page-Heading { @extend .Heading_size_s; } @media screen and (min-width: 360px) { .Page-Heading { @extend .Heading_size_m; } }. Так и блок в разметке нужен один, и модификаторы переиспользуются, а не дублируются. Если стили модификаторов завтра изменятся, этот код менять не придётся. Но проблема возникает при сборке webpack'ом с postcss-loader'ом, я вынужден импортировать то, что используется в экстендах, иначе на их месте пусто. То есть, файл будет начинаться с @import '../../Heading/_size/Heading_size_s.css'; и так же для size_m. И в итоговом бандле выходит так, что то, что я импортирую -- дублируется. То есть, стили для Heading_size_s и Heading_size_m будут встречаться по два раза, в оригинальных файлах, и в файле Page-Heading.css, куда я их импортирую.OD
OD
VG