Typy wartości

Typy wartości

Niektóre z utility class przyjmują jako wartość ściśle określone, wymienione w dokumentacji, teksty. Są jednak właściwości (np. wysokość, margines itp.) które przyjmują dowolne wartości. Poniżej znajdują się oznaczenia występujące w dokumentacji wraz z opisami jak i sposób formatowania tych wartości do CSS.

Zmienna CSS <var>

Większość selectorów pozwala na stosowanie zmiennych. Niektóre z właściwości automatycznie dodają prefix dla zmiennej, w celu ułatwienia pisania utility class dla elementów (co jest wskazane w dokumentacji). Aby zastosować zmienną w miejscu wartości, należy dodać podwójny znak minus po nazwie utility class:
p--nazwa-zmiennej - wartość właściwości zostanie ustawiona na var(--nazwa-zmiennej)

Wartość	Przykład	Przykład w CSS
<var>	columns--<var>	columns: var(--<var>)

<int>

Całkowita wartość liczbowa, tam gdzie wskazano int, wartość zostanie przekazana jako css wartości.

Wartość	Przykład	Przykład w CSS
<int>	columns-5	columns:5

<dim>

Rozmiar elementu lub innej jego właściwości (np. margines). Jeśli przekażemy w wartości typu <dim> tylko liczbę, zostanie ona potraktowana jako wymiar, który jest wielokrotnością 0.25rem

Wartość	Przykład	Przykład w CSS
<int>	m-5	margin: (5 * 0.25rem)
<int>p	m-10p	margin: 10%
<int>rem	m-10rem	margin: 10rem
<int>px	m-10px	margin: 10px

<color>

Kolor elementu zawsze pobierany jest ze zmiannej CSS. Możliwe jest ustawienie przezroczystości koloru.

Wartość	Przykład	Przykład w CSS
<color>	c--nazwa	color: var(--color--nazwa, var(--nazwa))
<color>/<int>	c--red/30	color: color-mix( in srgb, var(--color--red, var(--red)) 30%, transparent )

<time>

Czas dla animacji

Wartość	Przykład	Przykład w CSS
<int>	io-delay-500	delay: 500ms