Как да използвате променливи в CSS и да рационализирате своя стил

Повечето уебсайтове използват CSS, за да излъскат външния си вид и да стилизират различни компоненти на уеб страницата. CSS или Cascading Style Sheet технически не е език за програмиране. Въпреки това CSS може да се използва с езици за програмиране като JavaScript за създаване на отзивчиви и интерактивни уеб страници.

Ако сте използвали езици за програмиране, като JavaScript, знаете, че можете да декларирате променлива, да й присвоите стойност и да я използвате повторно в различни части на вашия код. Добрата новина е, че можете да приложите същата концепция в CSS.

Тази статия ще дефинира CSS променливи, ще опише предимствата им и ще ви покаже как да декларирате и използвате променлива в CSS.

Съдържание

Какво представляват променливите в CSS?

CSS променливите са персонализирани свойства, които позволяват на уеб разработчиците да съхраняват стойности, които могат да използват повторно чрез листа със стилове. Например, можете да декларирате стила на шрифта, цвета на фона и размера на шрифта, които можете да използвате повторно с елементи като заглавия, параграфи и div във вашата кодова база.

Защо да използваме CSS променливи? Това са някои от причините;

Улеснява актуализирането на кода: След като декларирате променлива, можете да използвате отново цялата си таблица със стилове, без да актуализирате всеки елемент ръчно.
Намалява повторенията: С нарастването на вашата кодова база ще откриете, че имате подобни класове и елементи. Вместо да пишете CSS код за всеки елемент, можете просто да използвате CSS променливи.
Прави вашия код по-лесен за поддръжка: Поддръжката на кода е важна, ако искате вашият бизнес да бъде действащо предприятие.
Подобрява четливостта: Модерният свят насърчава сътрудничеството. Използването на променливи в CSS води до компактна кодова база, която е четлива.
Лесно поддържане на последователност: CSS променливите могат да ви помогнат да поддържате последователен стил, докато изходният ви код расте или размерът на приложението се увеличава. Например, можете да декларирате полетата, подложките, стила на шрифта и цветовете, които да се използват във вашите бутони в уебсайта.

Как да използвате FaceTime Handoff на iPhone, iPad и Mac

Как да декларираме променливи в 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:

  }

В горния код можете да използвате всяка от променливите, декларирани с различни елементи, като заглавия, параграфи, divs или дори цялото тяло.

Как да използвате променливи в 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(–основен цвят);

Как да настроите RAID на твърдия диск в Open Media Vault

Проверете всички останали елементи и ще забележите тенденция в начина, по който се прилага ключовата дума var.

Използвайте 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-цвят);

Използвахме глобалната променлива, която декларирахме по-рано като тегло на нашия шрифт;

тегло на шрифта: var(–тегло на шрифта);

Добавяне на JavaScript код

Можем да направим нашия елемент за предупреждение отзивчив; когато щракнете върху него, получавате изскачащ прозорец на вашия браузър, който казва; „Използвахме CSS променливи с JavaScript!!!!“.

Можем да добавим JavaScript код директно към HTML кода, като го оградим с