Page 146 - CSS

Valid/Invalids

Naming When naming CSS variables, it contains only letters and dashes just like other CSS
properties (eg: line-height, -moz-box-sizing) but it should start with double dashes (--)

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

CSS Variables are case sensitive.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Empty Vs Space

/* Invalid */
--color:;

/* Valid */
--color: ; /* space is assigned */

Concatenations

/* Invalid - CSS doesn't support concatenation*/
.logo{
--logo-url: 'logo';
background: url('assets/img/' var(--logo-url) '.png');
}

/* Invalid - CSS bug */
.logo{
--logo-url: 'assets/img/logo.png';
background: url(var(--logo-url));
}

/* Valid */
.logo{
--logo-url: url('assets/img/logo.png');
background: var(--logo-url);
}

https://riptutorial.com/ 124