CSS mainīgie (Custom Properties) ļauj definēt atkārtoti izmantojamas vērtības, kas atvieglo stilu pārvaldību un nodrošina konsekventu dizainu visā lapā.

Mainīgo definēšana

Mainīgos definē ar -- prefiksu. Parasti tos norāda :root selektorā, lai tie būtu pieejami visā dokumentā:

:root {
--galvena-krasa: #3498db;
--teksta-krasa: #333;
--fona-krasa: #f5f5f5;
--apmales-radius: 8px;
--atstarpe: 20px;
--fonts: 'Inter', Arial, sans-serif;
}

Mainīgo izmantošana

Mainīgos lieto ar var() funkciju:

body {
font-family: var(--fonts);
color: var(--teksta-krasa);
background: var(--fona-krasa);
}

.poga {
background: var(--galvena-krasa);
border-radius: var(--apmales-radius);
padding: var(--atstarpe);
}

a {
color: var(--galvena-krasa);
}

Ja mainīgais nav definēts, var norādīt rezerves vērtību:

color: var(--krasa, #333); /* ja --krasa nav definēts, izmantos #333 */

Tumšais režīms

CSS mainīgie padara tumšā režīma ieviešanu ļoti vienkāršu:

:root {
--fona-krasa: #ffffff;
--teksta-krasa: #333333;
--kartites-fons: #f5f5f5;
}

/* Tumšais režīms, ja lietotāja sistēma ir tumšajā režīmā */
@media (prefers-color-scheme: dark) {
:root {
--fona-krasa: #1a1a2e;
--teksta-krasa: #e0e0e0;
--kartites-fons: #16213e;
}
}

Visi elementi, kas izmanto šos mainīgos, automātiski pielāgosies!

Mainīgie komponentos

Mainīgos var definēt arī uz konkrēta elementa, ne tikai :root:

.kartite {
--kartites-krasa: #3498db;
border-left: 4px solid var(--kartites-krasa);
}

.kartite.brīdinājums {
--kartites-krasa: #e74c3c;
}

.kartite.veiksme {
--kartites-krasa: #2ecc71;
}

Aprēķini ar calc()

calc() funkcija ļauj veikt matemātiskos aprēķinus CSS vērtībās, un to var kombinēt ar mainīgajiem:

:root {
--atstarpe: 20px;
}

.konteiners {
padding: var(--atstarpe);
width: calc(100% - var(--atstarpe) * 2);
}

.mazāks {
padding: calc(var(--atstarpe) / 2);
}

Noderīgi CSS jaunumi

Modernajā CSS ir arī citas noderīgas iespējas:

  • aspect-ratio: 16/9; — elementa proporciju uzturēšana
  • object-fit: cover; — attēla pielāgošana konteineram (līdzīgi background-size: cover)
  • scroll-behavior: smooth; — vienmērīga ritināšana
  • accent-color: #3498db; — formas elementu krāsa (checkbox, radio)
  • :has() — vecākelementa selektors, balstoties uz bērnu saturu

Noderīgi resursi