CSS가 if/else 문 없이 조건부 논리를 구현할 수 있나요?

CSS에 조건부 논리가 포함될 수 있나요?

CSS 영역 또는 Cascading Style Sheets는 표시된 대로 if/else 조건을 기본적으로 지원하지 않습니다. 전통적인 프로그래밍 언어로. 그러나 이러한 제한은 다양한 접근 방식을 통해 피할 수 있습니다.

1. CSS 클래스:

HTML 클래스를 활용하면 다양한 시나리오에 맞는 다양한 스타일 규칙을 만들 수 있습니다. 예를 들어 다음 코드는 클래스에 따라 고유한 배경 위치를 할당합니다.

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

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

2. CSS 전처리기(예: Sass):

Sass와 같은 CSS 전처리기는 더 복잡한 조건을 허용하는 조건문을 제공합니다.

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

3. CSS 사용자 정의 속성(변수):

CSS의 사용자 정의 속성은 변수와 유사하게 동작하며 런타임에 평가됩니다.

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

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

.two {
  background-color: black;
}

4. 서버측 전처리:

PHP와 같은 서버측 언어를 사용하면 동적 값을 기반으로 CSS 파일을 전처리할 수 있습니다.

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

5. UI 논리를 위한 CSS 기술:

Ahmad Shadeed는 자신의 기사에서 if/else를 사용하지 않고 일반적인 UI 기반 조건부 논리를 해결하는 새로운 CSS 기술을 선보입니다.
[CSS If/Else](https: //www.sitepoint.com/css-ifelse/)

위 내용은 CSS가 if/else 문 없이 조건부 논리를 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!