Can Css воплощает условную логику?

сфера CSS или каскадные листы стилей, не поддерживает, если/ense, как виден в традиционных языках программирования. Однако это ограничение можно обойти через различные подходы:

1. Классы CSS:

. Используя классы HTML, вы можете создавать разные правила стиля для разных сценариев. Например, следующий код назначает различные фоновые позиции на основе класса:

Text
Text

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

2. CSS Preprocessors (например, SASS):

CSS Preprocessors, как Sass, предоставляют условные утверждения, которые позволяют более сложные условия:

$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: px 8px;
}

5. Методы CSS для UI Logic:

Ahmad Shadeed демонстрируют новые методы CSS, чтобы разрешить общую условную логику на основе UI без использования if/else в своей статье:
[css if/else] (https://www.sitepoint.com/css-ifelse/) [https://www.sitepoint.com/css-ifelse/) [https://www.sitepoint.com/css-ifelse/else] [https://www.sitepoint.com/css-ifelse/else] [https://www.sitepoint.com/css-ifelse if/els