我想在我的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;
}
在这种情况下，你会有性能影响，因为缓存这样的样式表将很困难。
