Question

我想要做的是将占位符名称与颜色联系起来，以便我可以轻松替换整个调色板，而无需更改单个元素的CSS。将有许多占位符用于相同的颜色，因此当我想尝试另一个调色板或单独的颜色时，我只需要更改主控，即占位符不必在调色板更改时更改。

// Pseudocode example of a level of indirection:
// this is the master color pallet
blue: dodgerblue

/* this is actual css for an element with a placeholder for color */
.openButton {
    background: blue; /* displays as dodgerblue */
 }

 // changing the palette
blue: skyblue

.openButton {
    background: blue; /* displays as skyblue */
 }

我应该提一下，目前我正在做以下但是它要求将颜色视为另一类不是我正在寻找的间接方式。

 .blue{
      color:dodgerblue;
}

Answer 1

仅使用css是不可能的（请查看更少）。

我会在你的项目开始时给你推荐，特别是如果非常大的话，要有一个css表（我称之为）公共属性。然后，我总是在该表中添加的一个常见属性是（其中包括）将在项目中经常使用的颜色（用于文本和背景）（合法颜色）。

例如：

.txt-color-light {color:#xxxxxx;}
.txt-color {color:#xxxxxx;}
.txt-color-dark {color:#xxxxxx;}
.bck-color-light {background-color:#xxxxxx;}
.bck-color {background-color:#xxxxxx;}
.bck-color-dark {background-color:#xxxxxx;}

从那时起，我永远不必按类添加任何元素的颜色（非常见和独特的元素除外）我只需在需要时在html中添加类。一开始我可能会感到困惑，一旦我习惯它，它变得更快，更少的css线，并且你需要在所有项目中更改颜色时，你只需要改变一行。

我的2美分.-

是否有可能在CSS中具有一定程度的间接？

1 个答案: