css - 如何在css中创建继承如何DRY

Question

:root {
  --c-primary: #fff;
  --c-text-color: #000000;
  --c-border-color: rgb(230, 236, 240);
  --c-gray: #6e767d;
  --c-dark-gray: #202327;

  --fade: 120ms;
}

.light.blue:root {
  --c-theme: rgb(26, 145, 218);
  --c-theme-10: rgb(26, 145, 218, 0.1);
}

.light.yellow:root {
  --c-theme: rgb(230, 156, 28);
  --c-theme-10: rgba(230, 156, 28, 0.1);
}

.light.pink:root {
  --c-theme: #e0245e;
  --c-theme-10: rgba(16, 22, 26, 0.1);
}

.light.purple:root {
  --c-theme: rgb(121, 75, 196);
  --c-theme-10: rgb(121, 75, 196, 0.1);
}

.light.orange:root {
  --c-theme: rgb(220, 84, 31);
  --c-theme-10: rgb(220, 84, 31, 0.1);
}

.light.green:root {
  --c-theme: rgb(21, 172, 89);
  --c-theme-10: rgb(21, 172, 89, 0.1);
}

/* == */

.dim.blue:root {
  --c-theme: rgb(26, 145, 218);
  --c-theme-10: rgb(26, 145, 218, 0.1);
  --c-primary: rgb(21, 32, 43);
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dim.yellow:root {
  --c-theme: rgb(230, 156, 28);
  --c-theme-10: rgba(230, 156, 28, 0.1);
  --c-primary: rgb(21, 32, 43);
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dim.pink:root {
  --c-theme: #e0245e;
  --c-theme-10: rgba(16, 22, 26, 0.1);
  --c-primary: rgb(21, 32, 43);
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dim.purple:root {
  --c-theme: rgb(121, 75, 196);
  --c-theme-10: rgb(121, 75, 196, 0.1);
  --c-primary: rgb(21, 32, 43);
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dim.orange:root {
  --c-theme: rgb(220, 84, 31);
  --c-theme-10: rgb(220, 84, 31, 0.1);
  --c-primary: rgb(21, 32, 43);
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dim.green:root {
  --c-theme: rgb(21, 172, 89);
  --c-theme-10: rgb(21, 172, 89, 0.1);
  --c-primary: rgb(21, 32, 43);
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

/* == */

.dark.blue:root {
  --c-theme: rgb(26, 145, 218);
  --c-theme-10: rgb(26, 145, 218, 0.1);
  --c-primary: #000;
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dark.yellow:root {
  --c-theme: rgb(230, 156, 28);
  --c-theme-10: rgba(230, 156, 28, 0.1);
  --c-primary: #000;
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dark.pink:root {
  --c-theme: #e0245e;
  --c-theme-10: rgba(16, 22, 26, 0.1);
  --c-primary: #000;
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dark.purple:root {
  --c-theme: rgb(121, 75, 196);
  --c-theme-10: rgb(121, 75, 196, 0.1);
  --c-primary: #000;
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dark.orange:root {
  --c-theme: rgb(220, 84, 31);
  --c-theme-10: rgb(220, 84, 31, 0.1);
  --c-primary: #000;
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

.dark.green:root {
  --c-theme: rgb(21, 172, 89);
  --c-theme-10: rgb(21, 172, 89, 0.1);
  --c-primary: #000;
  --c-text-color: #ffffff;
  --c-border-color: #2f3336;
  --c-gray: #6e767d;
  --c-dark-gray: #202327;
}

我有一个类似的 css 代码，我正在尝试克隆高音扬声器。在这个特定的部分，我现在正在研究主题功能。

我们有 3 个主题和 6 个子主题。我试图在这条线上结合。但我不想让代码重复。看看我的代码，我想要这样的逻辑，但我认为我无法构建它。能否请您给我一些建议。你能告诉我这件事吗？

我只需要这个

:dark {
  --c-primary: #fff;
  --c-text-color: #000000;
  --c-border-color: rgb(230, 236, 240);
  --c-gray: #6e767d;
  --c-dark-gray: #202327;

  --fade: 120ms;
}

:dim {
  --c-primary: #fff;
  --c-text-color: #000000;
  --c-border-color: rgb(230, 236, 240);
  --c-gray: #6e767d;
  --c-dark-gray: #202327;

  --fade: 120ms;
}

但它不工作！

标签： cssinheritancepostcss

Answer 1

你通常想要的是一个带有函数的 CSS 预处理器。萨斯之类的。你可以在 Sass 中定义函数来生成你的 CSS 代码，这样你就不需要自己重复了。我不熟悉 postcss，但是关于该主题有一个stackoverflow 问题。还有一个用于结合 sass 和 postcss 的库。这也许就是你想走的路。