CSS ცვლადები

CSS ცვლადები გვეხმარება სხვადასხვა ტიპის ინფორმაციის შენახვაში. CSS ცვლადები ან მომხმარებლის მიერ განსაზღვრული თვისებები საშუალებას გვაძლევს, შევინახოთ და ხელახლა გამოვიყენოთ სხვადასხვა მნიშვნელობები ჩვენს სტილში.

მაგალითად, თუ ვებგვერდზე გვაქვს ორი ძირითადი ფერი: მთავარი და მეორეხარისხოვანი. შეგვიძლია ისინი ყოველ ჯერზე ხელით ჩავწეროთ. თუმცა, თუ მოგვიანებით მათი შეცვლა დაგვჭირდება, ეს შრომატევადი პროცესი იქნება, რადგან მოგვიწევს ამ გამოყენებული ფერების ჩანაცვლება ყველა სტრიქონზე.

ცვლადების აღწერა

ცვლადების ჩაწერა შეგვიძლია გლობალურად :root ფსევდო კლასში ან კონკრეტულად რომელიმე ელემენტის სელექტორში.

ცვლადის აღსაწერად გამოიყენება შემდეგი ფორმულა:

--variable-name: value;

• variable-name: არის ცვლადის სახელი. სავალდებულო დავიწყოთ ---ით, ხოლო ყოველი ახალი სიტყვისთვის კი შეგვიძლია გამოვიყენოთ -.
• value: მინიჭებული მნიშვნელობა.

მაგალითად:

:root {
  --primary-color: #1890ff;
  --secondary-color: #000;
}

.card {
  --padding-size: 1.5rem;
}

ცვლადების გამოყენება

ცვლადის გამოყენებისთვის საჭიროა var() ფუნქციის გამოყენება.

h1 {
  color: var(--primary-color);
}

var()-ის გამოყენებისას ასევე შეგვიძლია განვსაზღვროთ ნაგულისხმევი მნიშვნელობა თუ ცვლადი არ ჩაიტვირთა.

მაგალითად:

h1 {
  color: var(--primary-color, black);
}

ცვლადის მნიშვნელობის შეცვლა

შეგვიძლია ცვლადის მნიშვნელობა თავიდან აღწერით შევცვალოთ.

<p>root მნიშვნელობა</p>
<p class="modified">შეცვლილი მნიშვნელობა</p>

:root {
  --default-font-size: 16px;
}

p {
  font-size: var(--default-font-size);
}

p.modified {
  --default-font-size: 20px;
}

p.modified-სთვის აღარ დაგვჭირდა font-size-ის მინიჭება თავიდან. ჩვენ უბრალოდ შევცვალეთ მისი ფონტის ზომის ცვლადის მნიშვნელობა იმ შემთხვევაში, თუ მას .modified კლასი გააჩნია.

ასე შეგვიძლია მივიღოთ უფრო დინამიური სტილები.

მემკვიდრეობა

ცვლადების მნიშვნელობები მემკვიდრეობით გადადის სხვადასხვა ელემენტებზე. რადგან :root გლობალური ფსევდო კლასია, ის ყველგან ხელმისაწვდომია.

თუ კონკრეტულ ელემენტს მივანიჭებთ ცვლადის მნიშვნელობას, ის მხოლოდ მის შვილობილ ელემენტებს გადასცემს ცვლადის მნიშვნელობას.

<p>შემთხვევითი პარაგრაფი</p>
<div class="card">
  <p>ქარდში არსებული პარაგრაფი</p>
</div>
<p>ქარდის შემდეგ არსებული პარაგრაფი</p>

:root {
  --default-font-size: 16px;
}

p {
  font-size: var(--default-font-size);
}

div.card {
  --default-font-size: 20px;
}

შეჯამება

ამ სტატიაში განვიხილეთ თუ რა არის CSS ცვლადები და როგორ შეიძლება მათი გამოყენება.