andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
d0d9afa598e60ec1ff8dedb4efd4c44f0811f8bb
30-seconds-of-code/snippets/custom-variables.md
Stefan Feješ d0d9afa598 add browser support for custom-variables and build
2018-03-02 21:55:30 +01:00

1.4 KiB
Raw Blame History

Custom variables

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

CSS

:root {
    --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;
}

Demo

CSS is awesome!

<style> :root { --some-color: #686868; --some-keyword: italic; --some-size: 1.25em; --some-complex-value: 1px 1px 2px WhiteSmoke, 0 0 1em SlateGray , 0 0 0.2em SlateGray; } .snippet-demo__custom-variables p{ color: var(--some-color); font-size: var(--some-size); font-style: var(--some-keyword); text-shadow: var(--some-complex-value); } </style>

Explanation

Declare variable with --variable-name:.

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

Browser support

⚠️ This is an experimental technology.