如何声明变量并在css中使用它们

Question

我在css中有以下课程

.class1 {
ABC: 1s;
DEF: -1;
}

.class2 {
ABC: 2s;
DEF: -2;
}

.class3 {
ABC: 3s;
DEF: -3;
}

我试图这样做但不能正常工作

:root{
--my-number: varNumber;
}

.class{var(--my-number)} {
ABC: {var(--my-number)}s;
DEF: -{var(--my-number)};
}

你可以看到除了数字之外这些类是相似的。我可以从react组件jsx访问变量中的那些数值。如何设置CSS变量，以便我可以将该变量传递给类名及其属性？

Answer 1

据我所知，你不能用纯CSS做到这一点。看看Saas或Less，或其他语言来编写增强的CSS并将其编译为纯CSS