It is possible to create variables in CSS ?

Answer 1

yes

element {
--main-color: #adf;
}
and then:

element {
color: var(--main-color);
}

element is like a namespace. You can also set its in the root such way:

:root {
color: var(--main-color, green); /* where green is like default value*/
}

By the way, you can get access to variables from javascript, but for scss variables you can't do it for example. Css is cool🌻

Answer 2

Hi Tzurumi Nakato,

Have you been able to get CSS variables to work in the Code Playground? I haven't been able to. 😳

Answer 3

Nevermind. I guess global variables must be created in :root.

Answer 4

Janning⭐ Look at supporting

Answer 5

Hi Tzurumi Nakato,

Have you been able to get CSS variables to work in the Code Playground? I haven't been able to. 😳

Answer 6

css and html aren't programming languages

Answer 7

yes
Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes (--) and is case sensitive!

The syntax of the var() function is as follows:

var(custom-name, value)

Answer 8

Yeah, having to declare variables in root to make them global caught me off guard as I'm used to using a preprocessor, which allows me to just declare them outside of everything else. 👍

Answer 9

Hi Skingley Joseph,

Welcome! I'm not sure how your statement is relevant to this thread, but if you have a question, you should start your own thread separately so we can help you better.

Answer 10

its dont possible un my self

Answer 11

you cannot , but you can create classe and id
for ex.
.myclass{
property:value;
}
when you refer the css file to your HTML file when you give class to the tag as myclass the properties of the class are given to that tag