{"id":2766,"date":"2020-04-28T07:34:57","date_gmt":"2020-04-28T06:34:57","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=2766"},"modified":"2025-05-28T00:05:12","modified_gmt":"2025-05-27T23:05:12","slug":"css-variables","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/variables\/css-variables","title":{"rendered":"CSS Variables"},"content":{"rendered":"\n<p>Variables can be defined using the var function:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var(--custom-name, value)<\/code><\/pre>\n\n\n\n<p>The variable name must begin with two dashes (&#8211;) and is case sensitive<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*-------------------------*\/\n\/*-------------------------*\/\n\/*----- CSS VARIABLES -----*\/\n\/*-------------------------*\/\n\/*------------------------*\/\n:root {\n  --color-main1: #06c;\n  --color-text1: #CCC;\n}\n\/*Using the defines within your css:\nvar(--color-main1)\nvar(--color-text1)\n*\/\n\n\n.my_class_name {\n  background-color: var(--color-main1);\n}<\/code><\/pre>\n\n\n\n<p>Ensuring the values are available<\/p>\n\n\n\n<p>If you don&#8217;t use the the root values in your page but want to use them in javascript then you can use this trick to ensure they are parsed ready to use:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Dummy class to ensure the variables are parsed and available to javascript if not used elsewhere*\/\n.__dummy-variable-usage {\n  color: var(--odac-color-main1);\n  color: var(--odac-color-main2);\n  color: var(--odac-color-attention);\n  display: none;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Variables can be defined using the var function: The variable name must begin with two dashes (&#8211;) and is case sensitive Ensuring the values are available If you don&#8217;t use the the root values in your page but want to use them in javascript then you can use this trick to ensure they are parsed [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[236],"tags":[],"class_list":["post-2766","post","type-post","status-publish","format-standard","hentry","category-variables"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=2766"}],"version-history":[{"count":6,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2766\/revisions"}],"predecessor-version":[{"id":5060,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2766\/revisions\/5060"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=2766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=2766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=2766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}