Динамическое вложение классов CSS в SASS
Я пытаюсь создать динамически вложенные классы в SASS. Я использую React 18 и SASS 1.62 (Craco).
У меня есть файл scss, который должен выглядеть так
.gridRow.scss
.root {
&.row-cols-auto>* {
flex: 0 0 auto;
width: auto;
}
&.row-cols-1>* {
flex: 0 0 auto;
width: 100%;
}
&.row-cols-2>* {
flex: 0 0 auto;
width: 50%;
}
&.row-cols-3>* {
flex: 0 0 auto;
width: 33.3333333333%;
}
&.row-cols-4>* {
flex: 0 0 auto;
width: 25%;
}
&.row-cols-5>* {
flex: 0 0 auto;
width: 25%;
}
&.row-cols-6>* {
flex: 0 0 auto;
width: 16.6666666667%;
}
}
Я хочу динамически создавать все эти классы CSS. Для этого я написал следующий миксин:
$grid-row-columns: 6;
@mixin create-row-cols () {
&.row-cols-auto>* {
flex: 0 0 auto;
width: auto;
}
@for $i from 1 through $grid-row-columns {
&.row-cols-#{$i}>* {
flex: 0 0 auto;
width: math.percentage(math.div(1, $i));
}
}
}
Тем не менее, когда я использую миксин как:
.root {
@include create-row-cols()
}
Это не работает.
Кто-нибудь знает, как это исправить? У меня сейчас нет идей. Спасибо.
Я попытался жестко закодировать значения, которые сработали.
Я попытался проверить связанный файл css, но не смог его найти, возможно, взглянув на него, вы увидите, что он на самом деле создан.
Я попытался реорганизовать функцию миксина, чтобы найти опечатки, но не смог их найти.
Ответы 2
Я думаю, что причина, по которой это не сработало, заключается в том, что ваша версия SASS немного низковата. Попробуйте обновить, может решить проблему.
Или другое решение:
используйте width: math.percentage(1/$i); вместо width: math.percentage(math.div(1, $i));.
Ниже мой тест:
Моя sass-версия:
Дарт-сасс это:
И это работает.
Так что я все еще считаю, что ваша версия sass недостаточно высока.
@JonatanKruszewski Я добавил несколько скриншотов моей тестовой среды. Вы можете проверить на своей стороне.
Спасибо Джейсон. Теперь, когда я вижу, что у вас все работает нормально, я проверю некоторые другие элементы в среде. Я мог что-то еще упустить.
Спасибо, Джейсон, как вы сказали, все работало нормально. Проблема заключалась в обработке className. Это была не та версия.
В конечном итоге проблема была не в SCSS, а в файле реакции. Это не попало в цель из-за неправильной обработки classNames.
Пример фиксированного компонента:
const Row = React.forwardRef(({
as: Component,
className,
rowCols,
g,
gx,
gy,
children,
...props
}, ref) => {
// parse possible {XS: 4, ...} to {GridRow-row-cols-xs-4: 4, ...}
const mappedRowCols = _.isObject(rowCols) ?
_.mapKeys(rowCols, (value, key) => [styles[`row-cols-${_.toLower(key)}-${value}`]]) :
rowCols && {[styles[`row-cols-${rowCols}`]]: rowCols};
const mappedGutters = _.isObject(g) ?
_.mapKeys(g, (value, key) => [styles[`g-${_.toLower(key)}-${value}`]]) :
g && {[styles[`g-${g}`]]: g};
const mappedGuttersX = _.mapKeys(gx, (value, key) => [styles[`gx-${_.toLower(key)}-${value}`]]);
const mappedGuttersY = _.mapKeys(gy, (value, key) => [styles[`gy-${_.toLower(key)}-${value}`]]);
return (
<Component
ref = {ref}
{...props}
className = {classNames(
styles.root,
mappedGuttersX,
mappedGuttersY,
mappedGutters,
mappedRowCols,
className)}
>
{children}
</Component>
);
});
На самом деле Sass обновлен до последней версии, и использование деления без math.div вызывает предупреждение в линтере