условие if / else в CSS

Учитывая HTML-файл, и нам нужно применить условия if-else в CSS.

Нет, мы не можем использовать условия if-else в CSS, поскольку CSS не поддерживает логику. Но мы можем использовать некоторые альтернативы if-else, которые обсуждаются ниже:

Метод 1. В этом методе мы будем использовать классы в файле HTML для достижения этой цели. Мы определим разные имена классов в соответствии с условиями, которые мы хотим применить в CSS.

• Предположим, мы хотим изменить цвет текста в соответствии с номером строки, тогда условие if-else будет таким:

   if (line1) {
     красный цвет;
  }еще{
     цвет: зеленый;
  }

• Используя описанный выше метод, мы создадим классы, а затем применим в них CSS:

   .color-line1 {
     красный цвет;
  }
  .color-line2 {
     цвет: зеленый;
  }
  

Таким образом, указанные выше классы будут выполняться только для тегов HTML, в которых используются эти классы.

Пример:

Выход:

Метод 2: мы можем использовать препроцессоры CSS, такие как SASS, что позволяет нам писать в нем операторы условий. Даже если вы используете SASS, вам необходимо предварительно обработать таблицы стилей, что означает, что условие оценивается во время компиляции, а не во время выполнения.

Синтаксис:

 $ type: line;
п {
  @if $ type == line1 {
    цвет синий;
  } @else if $ type == line2 {
    красный цвет;
  } @else if $ type == line3 {
    цвет: зеленый;
  } @еще {
    черный цвет;
  }
}

Чтобы узнать больше о SASS, нажмите здесь
Чтобы прочитать об if-else в SASS, нажмите здесь