Чого можна досягнути з допомогою CSS змінних і неможливо зробити використовуючи препроцесори

Зараз дуже популярним є використання препроцесорів для CSS: Less, Saas, Stylus. Основною причиною широкого застосування цих інструментів є можливість роботи зі змінними. Проте, після компіляції в звичайний CSS, всі значення є статичними.

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

Давайте розглянемо все це більш детально.

Теми сайту без CSS змінних

Давайте спробуємо реалізувати кольорові теми для сайту, щоб проілюструвати корисність CSS змінних. Наше завдання - змінити різні кольори, в залежності від класу елемента . В CSS без змінних ви могли б зробити щось на кшталт:

    .red-theme .primary-color {
      color: #801515;
    }
     
    .red-theme .primary-color-bg {
      background-color: #801515;
    }
     
    .red-theme .secondary-color {
      color: #D46A6A;
    }
     
    .red-theme .secondary-color-bg {
      background-color: #D46A6A;
    }
     
    .red-theme .tertiary-color {
      color: #AA3939;
    }
     
    .red-theme .tertiary-color-bg {
      background-color: #AA3939;
    }

Це призводить до 6 окремих селекторів в результуючому CSS - і це тільки для однієї теми. На додаток до цього, вам буде потрібно розмістити класи по всій розмітці або додати явні селектори в стилі CSS теми, які не дуже зручно "обслуговувати". Обидва способи не є ефективним рішенням проблеми.

Це значить:

    <h1 class="tertiary-color">For Example</h1>
    <button class="primary-color-bg">A button</button>
    <a class="secondary-color">A link</a>

Або:

    .red-theme .primary-color-bg,
    .red-theme button {
      background-color: #801515;
    }
     
    .red-theme .secondary-color,
    .red-theme a {
      color: #D46A6A;
    }
     
    .red-theme .tertiary-color,
    .red-theme h1 {
      color: #AA3939;
    }

Теми сайту з використанням CSS змінних

Реалізація з допомогою змінних набагато ефективніше. В такому випадку, ви можете визначити колір змінної .red-theme і потім використовувати її безпосередньо для інших стилів. Це дозволить зберігати інформацію стилів окремо від вашої розмітки, разом з селекторами.

    .red-theme {
      --theme-primary: #801515;
      --theme-secondary: #D46A6A;
      --theme-tertiary: #AA3939;
    }
     
    button, a {
      background-color: var(--theme-primary);
      color: var(--theme-secondary);
    }
     
    h1 {
      color: var(--theme-tertiary);
    }

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

      <nav class="blue-theme">
        <button>Blue button</button>
      </nav>
      <main>
        <button>Red button</button>
      </main>

Додаткові способи використання

Є купа додатків, де CSS змінні можуть розширити можливості препроцессорів. Інший приклад реалізації системи відстаней, подібної до Gmail. Вона дозволяє користувачеві вибрати варіант відображення інтерфейсу користувача.

    .compact {
      --option-padding: 0.1em 0.2em;
    }
     
    .cosy {
      --option-padding: 0.3em 0.6em;
    }
     
    .comfortable {
      --option-padding: 0.5em 1em;
    }
     
    .list-item {
      padding: var(--option-padding);
    }

Браузерна підтримка

На жаль, підтримка CSS змінних здійснються лише останньою версією Firefox та Firefox для Android.