Як використовувати змінні в CSS і оптимізувати свій стиль

| | 0 Comments| 4:36 AM
Categories:

Більшість веб-сайтів використовують CSS для покращення зовнішнього вигляду та стилізації різних компонентів веб-сторінки. CSS, або Cascading Style Sheet, технічно не є мовою програмування. Однак CSS можна використовувати з такими мовами програмування, як JavaScript, для створення адаптивних та інтерактивних веб-сторінок.

Якщо ви користувалися мовами програмування, такими як JavaScript, ви знаєте, що ви можете оголосити змінну, призначити їй значення та повторно використовувати її в різних частинах коду. Хороша новина полягає в тому, що ви можете застосувати ту саму концепцію в CSS.

У цій статті буде визначено змінні CSS, описано їхні переваги та показано, як оголосити та використовувати змінну в CSS.

Що таке змінні в CSS?

Змінні CSS — це власні властивості, які дозволяють веб-розробникам зберігати значення, які вони можуть повторно використовувати в таблиці стилів. Наприклад, ви можете оголосити стиль шрифту, колір фону та розмір шрифту, які можна повторно використовувати з такими елементами, як заголовки, абзаци та div у вашій кодовій базі.

Навіщо використовувати змінні CSS? Це деякі з причин;

  • Полегшує оновлення коду: коли ви оголосили змінну, ви можете повторно використовувати всю свою таблицю стилів, не оновлюючи кожен елемент вручну.
  • Зменшує повторення: у міру того, як ваша кодова база зростає, ви побачите, що у вас є схожі класи та елементи. Замість того, щоб писати код CSS для кожного елемента, ви можете просто використовувати змінні CSS.
  • Робить ваш код зручнішим для обслуговування: підтримка коду важлива, якщо ви хочете, щоб ваш бізнес продовжував працювати.
  • Покращує читабельність: сучасний світ заохочує співпрацю. Використання змінних у CSS призводить до створення компактної кодової бази, яку можна читати.
  • Легко підтримувати узгодженість: змінні CSS можуть допомогти вам підтримувати узгоджений стиль у міру збільшення вихідного коду або збільшення розміру програми. Наприклад, ви можете оголосити поля, відступи, стиль шрифту та кольори, які використовуватимуться у ваших кнопках на веб-сайті.
  Як відновити стару електронну пошту AOL

Як оголосити змінні в CSS

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

Щоб оголосити змінну CSS, почніть з назви елемента, потім напишіть два тире (–), потрібне ім’я та значення. Основний синтаксис:

element {

--variable-name: value;

}

Наприклад, якщо ви хочете застосувати відступ до всього документа, ви можете оголосити його як;

body { 

--padding: 1rem;

}

Область змінних у CSS

Змінні CSS можуть бути локально (доступні в певному елементі) або глобально (доступні у всій таблиці стилів).

Локальні змінні

Локальні змінні додаються до певних селекторів. Наприклад, ви можете додати їх до кнопки. Це приклад;

.button {

    --button-bg-color: #33ff4e;

  }

Змінна кольору фону доступна для селектора кнопки та його дочірніх елементів.

Глобальні змінні

Після оголошення ви можете використовувати глобальні змінні з будь-яким елементом у своєму коді. Ми використовуємо псевдоклас :root для оголошення глобальних змінних. Ось як ми їх оголошуємо;

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

У наведеному вище коді ви можете використовувати будь-які змінні, оголошені з різними елементами, наприклад заголовками, абзацами, елементами div або навіть усім тілом.

Як використовувати змінні в CSS

Ми створимо проект для демонстрації та додамо файли index.html та styles.css.

У файлі index.html ми можемо мати простий div з двома заголовками (h1 і h2) і абзацом (p).

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

У файлі style.css ми можемо мати наступне;

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

Коли веб-сторінка буде відтворена, ми матимемо наступне;

З наведеного вище коду ми оголосили глобальні змінні в елементі :root. Ми повинні використовувати ключове слово var, щоб використовувати глобальну змінну в будь-якому з наших елементів. Наприклад, щоб застосувати колір фону, який ми оголосили як глобальну змінну, ми представляємо наш код наступним чином;

фоновий колір: вар(–основний колір);

Перевірте всі інші елементи, і ви помітите тенденцію у застосуванні ключового слова var.

  Що таке HDMI VRR на PlayStation 5 і Xbox Series X?

Використовуйте змінні CSS із JavaScript

Ми будемо використовувати локальні та глобальні змінні, щоб проілюструвати, як використовувати змінні CSS із JavaScript.

Ми можемо додати елемент сповіщення до нашого існуючого коду;

Натисніть мене!

Наш новий документ index.html буде таким:

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

Ми можемо стилізувати нашу змінну. Додайте наступний код до наявного коду CSS;

.alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

Ми зробили наступне;

  • Визначено локальну змінну всередині елемента сповіщення;

–bg-колір: червоний

  • Використовується ключове слово var для доступу до цієї локальної змінної;

колір фону: var(–bg-color);

  • Використовується глобальна змінна, яку ми оголосили раніше як наш font-weight;

вага шрифту: var(–font-weight);

Додайте код JavaScript

Ми можемо зробити наш елемент сповіщення чуйним; коли ви натискаєте його, у вашому браузері з’являється спливаюче вікно з написом; «Ми використовували змінні CSS із JavaScript!!!!».

Ми можемо додати код JavaScript безпосередньо до HTML-коду, включивши його за допомогою тегів

x