CSS - 可能获得当前的“价值”和“添加”吗？

Question

在我的CSS中，我有一张斑马条纹的桌子。例如白色和浅蓝色。

让我们说我有三个栏目...我想做的是能够保持斑马条纹，并且在css（没有javascript）中添加阴影/使每个列的布鲁斯更暗。

这可能吗？有点像获取“当前”背景颜色#AABBCC然后将＃000011添加到当前颜色以给我#AABBDD ......

不知道这是否可能，所以只是想知道。我只是懒惰，因为我不想为我可能拥有的每个柱/柱组重新定义斑马条纹。

由于

Answer 1

不，CSS不支持此功能，除非您使用的是CSS表达式（依赖于Javascript）。

但是，如果您愿意为样式表使用预处理器，则可以使用像LESS这样的库来引入变量并执行类似的添加。此示例特别使用Javascript，因此也不符合标准。

Answer 2

哈哈，纯粹的CSS，没办法。有几种“类css”语言可以做到这一点：scss，less，stylus等。要点是你编写的代码可以编译成“真正的”CSS。

在手写笔中：

stripe( color )
    &
        background color
    &:nth-child(odd)
        background color + #000011

td.foo
    stripe( teal )

...生成

td.foo {
  background: #008080;
}
td.foo:nth-child(odd) {
  background: #008091;
}