{"id":2073,"date":"2019-09-27T13:17:57","date_gmt":"2019-09-27T11:17:57","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2073"},"modified":"2025-04-22T10:27:11","modified_gmt":"2025-04-22T08:27:11","slug":"css-custom-properties-variables","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/css-custom-properties-variables\/","title":{"rendered":"CSS Custom Properties (Variables)"},"content":{"rendered":"

CSS Custom Properties is the formally correct name for the more commonly used synonym CSS variables. In this article we want to give you an insight how CSS variables help you to make CSS files more structured and semantically understandable, and how to modify them easily with JavaScript.<\/p>\n

Documents or applications of any size contain many lines of CSS code. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. With CSS custom properties cascading variables can be defined as new primitive value type. They\u2019re typically used to store colors, font names, font sizes, length units, etc.<\/p>\n

Compared to preprocessor variables like Sass or Less, which have to be compiled into normal CSS to be read by the browser, CSS variables are real live CSS properties running in the browser. They can be changed in: Stylesheet documents, inline style attributes, SVG presentational attributes, media queries, animations and transitions. All this can also be manipulated via JavaScript. This opens up a whole world of possibilities!<\/p>\n

However, this does not mean that you have to choose between one or the other. Take advantage of the CSS variables and preprocessor variables and let them work together.<\/p>\n

Browser Support<\/strong><\/h3>\n

\"\"<\/a>
\n(references: BrowserSupport 20.09.2019 https:\/\/caniuse.com\/#search=css%20variables<\/a>)<\/em><\/p>\n

Syntax<\/strong><\/h3>\n

Initialize variable:
\nCustom properties starts with two hyphens (-) like --color<\/code>.<\/p>\n

element { --color: red; }<\/pre>\n
and accessed using var()<\/code>:<\/p>\n
element {\r\n    color: var(--color);\r\n}<\/pre>\n
Attention<\/strong>: unlike other CSS properties, custom properties are case-sensitive<\/em>!
\nFor instance, var(--foo)<\/code> and var(--FOO)<\/code> refer to two different custom properties, --foo<\/code> and --FOO<\/code> respectively.<\/p>\n
Custom properties are inherited. This means that if no value is set for a custom property on a particular element, the value of the parent element is used. As the following example illustrates:<\/p>\n
:root { --color: blue; }\r\ndiv { --color: green; }\r\n#alert { --color: red; }\r\n* { color: var(--color); }\r\n\r\n<p>I inherited blue from the root element!<\/p>\r\n<div>I got green set directly on me!<\/div>\r\n<div id='alert'>\r\n  While I got red set directly on me!\r\n  <p>I\u2019m red too, because of inheritance!<\/p>\r\n<\/div><\/pre>\n
\n\"Angular\n<\/picture>\n<\/a><\/p>\n
CSS Variables in JavaScript<\/h3>\n
In JavaScript there are many methods (see references) to use the values of custom properties. It is useful to know that JavaScript initialized the variable in HTML as inline style.<\/p>\n
In this CodePen example the variable --color<\/code> is globally initialized.<\/p>\n