[css] CSS에서 if / else 조건을 사용할 수 있습니까?

전통적인 의미는 아니지만 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 방식입니다.

그런 다음 Sass 와 같은 CSS 전처리 기가 있습니다. 당신이 사용할 수있는 조건문 이이 같은 which’d 살펴 :

$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;
}

이 경우 이러한 스타일 시트를 캐싱하기가 어렵 기 때문에 성능에 영향을 미칩니다.

답변

/*[if IE]*/
body {height:100%;}
/*[endif]*/

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}

background-position : 150px 8px;

background-position : 4px 8px;

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

.Container *:not(a)
{
    color: #fff;
}