Ефективна Робота з CSS

Щоб оголосити змінну, ми використовуємо псевдоклас :root у верхній частині нашого CSS-файлу і додаємо до імені змінної префікс --. Наприклад, давайте визначимо змінну --blue-color зі значенням #3f42f3 у нашому блоці :root:

css
Скопіювати код

Оголосивши змінну, ми можемо застосувати її до будь-якої властивості CSS за допомогою функції var(). Наприклад, щоб присвоїти властивості color елемента <h1> значення нашої змінної --blue-color, ми можемо написати

css
Скопіювати код

Let's combine the knowledge of variable declaration and usage in the following example:

In this example, we define two variables, --background-color and --text-color, and apply them to the background-color and color properties, respectively. By changing the values of these variables, we can easily update the colors throughout the stylesheet.

Overriding Properties

Sometimes, we need to override specific properties in CSS to achieve the desired styling. This can be accomplished by declaring a property with the same name within a nested selector and assigning a new value.

Consider the following example of a traffic light with different color signals:

By targeting the specific signal classes, we can fine-tune the color for each signal while maintaining the shared styles defined in the base .signal selector.

Орієнтуючись на конкретні класи сигналів, ми можемо точно налаштувати колір для кожного сигналу, зберігаючи при цьому загальні стилі, визначені в базовому селекторі .signal.