30-seconds-of-code/custom-variables.md at 39b676c125bd7209bde7e897ef8e413544f7f703

Files

atomiks 39b676c125 Improve usage share count (#138 )

* Improve usage share

* Remove 'No caveats' note from all snippets

* Fix transform-centering usage: #search -> #feat

* transform -> transforms2d

* Add missing link for multiline truncate

2019-02-18 04:35:48 +11:00

1.0 KiB

Raw Blame History

Custom variables

CSS variables that contain specific values to be reused throughout a document.

HTML

<p class="custom-variables">CSS is awesome!</p>

CSS

:root {
  /* Place variables within here to use the variables globally. */
}

.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

Demo

Explanation

The variables are defined globally within the :root CSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block.

Declare a variable with --variable-name:.

Reuse variables throughout the document using the var(--variable-name) function.

Browser support

https://caniuse.com/#feat=css-variables

1.0 KiB Raw Blame History