你可以在CSS中使用if/else条件吗？

我想在我的CSS中使用条件。

这个想法是，我有一个变量，当网站运行时生成正确的样式表。

我想让它根据这个变量的样式表改变！

看起来像：

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px;

这可以做吗？你怎么做到这一点？

不是传统意义上的，但如果你有权访问HTML，你可以使用类。考虑这个：

<p class="normal">Text</p>

<p class="active">Text</p>

和在您的CSS文件：

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

这是CSS的方式来做。

然后有CSS预处理器像Sass.你可以使用conditionals那里，看起来像这样：

$ type：monster;
p {
@if $ type == ocean {
颜色：蓝色;
} @else if $ type == matador {
红色;
} @else if $ type == monster {
颜色：绿色;
} @else {
颜色：黑色;
}}
}}

缺点是，你必须预处理你的样式表，并且条件在编译时被计算，而不是运行时。

CSS的一个较新的功能是custom properties(a.k.a. CSS变量)。它们在运行时(在支持它们的浏览器中)进行评估。

与他们，你可以做一些沿线：

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

最后，您可以使用您喜欢的服务器端语言预处理样式表。如果你使用PHP，提供一个style.css.PHP 文件，看起来像这样：

p {
  background-position: <?PHP echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

在这种情况下，你会有性能影响，因为缓存这样的样式表将很困难。

相关文章