CODEWITHSUNDEEP
csscss-variables
Shai UI
Shai UI

Reputation: 51928

Does css require that I use double dashes (--) in front of variable names?

I noticed when I use css variables I need to put two dashes in front of them:

:root {
    --main-txt-color: blue; 
}

#div1 {
    color: var(--main-txt-color);
}

I'd rather not have double dashes in the beginning of the variable names. I'd rather name it in a way that I choose to for example:

:root {
        myvar: blue; 
    }

Is there a way to do this or do I need to use double dashes?

Upvotes: 2

Views: 2784

Answers (2)

Maytha8
Maytha8

Reputation: 866

Custom Properties

Custom properties participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

You must use -- in variables, otherwise, it will result in an error.

Legal Statement

(With --)

:root {
  --my-color: #5637a8;
}
body {
  background-color: var(--my-color);
}

Illegal Statement

(Without the use of --)

:root {
  my-color: #85637d;
}
body {
  background-color: var(my-color);
}

Upvotes: 2

Mohan
Mohan

Reputation: 334

Double dashes are used in custom properties defined by the user.

On the other hand, CSS properties that already exist in the standard do not have double dashes.

For example, you can define the style within a .css file or within
inside :

body{
color: blue;
background-color: white;
}

h1 { 
    font-family: "Times New Roman";
    font-size: 20;
    font-weight: bold;    
    align: center;
    margin-top: 10;
    margin-bottom: 10;
    margin-left: 0;
    margin-right: 0;
 }

Upvotes: 1

Related Questions