Custom Properties—Part 1

Custom CSS properties na puwedeng gamitin sa maraming bagay

Francis Rubio

by Francis Rubio

Syntax

Declaration

--var-name : red ;

Pangalan ng variable

  • Kailangang magsimula sa dalawang dash.
  • Puwedeng may dash sa pagitan ng mga salita.
  • Bawal magsimula sa number.

Assignment ng value

  • Puwede kahit anong value.
  • String, number, color, length (px, em, rem, etc.), angle (deg, rad)

Usage

.element { color : var( --var-name ) ; }

CSS Property

Puwedeng gamitin sa kahit anong CSS property ang mga dinecalre mong variable.

var()

CSS function na kukuha ng value ng variable.

.element {
  --fg-color: red;
  color: var(--fg-color);
}

.element

As a color component

Dahil puwedeng mag-store ng kahit anong value ang mga custom property, puwede tayong mag-store ng numerical value na gagamitin natin bilang color component.

Sa example na ito, ginamit natin ang hsl() function para bigyan ng white background ang mga .element, pero gumamit tayo ng --opacity para sa opacity ng kulay. 

.element {
  --opacity: 50%;
  background-color: hsl(0deg 100% 100% / var(--opacity));
}

.element