你可以在CSS中使用if / else条件吗？ [英] Can you use if/else conditions in CSS?

问题描述

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

这个想法是，我有一个变量，当网站运行时，

我想要它，以便根据这个变量的样式表更改！

：

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

可以这样做吗？

解决方案

不是传统意义上的，但是你可以使用类来实现这一点， HTML。请考虑：

 < p class =normal>文字< / p& 
 
< p class =active>文字< / p> 
  

和您的CSS文件：

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

这是 CSS / p>

---

然后还有CSS预处理器，例如 Sass 。您可以在其中使用条件，其格式如下：


$ type：monster;
p {
@if $ type == ocean {
color：blue;
} @else if $ type == matador {
color：red;
} @else if $ type == monster {
color：green;
} @else {
color：black;
}
}


缺点是，你必须预处理你的样式表

---

CSS的更新功能是 自定义属性 （又名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; 
} 
  

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

I would like to use conditions in my CSS.

The idea is that I have a variable that I replace when the site is run to generate the right style-sheet.

I want it so that according to this variable the style-sheet changes!

It looks like:

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

Can this be done? How do you do this?

解决方案

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

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

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

and in your CSS file:

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

That's the CSS way to do it.

---

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

---

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

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

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

.two {
  background-color: black;
}

---

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

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

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

这篇关于你可以在CSS中使用if / else条件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！