CSS Custom Properties (Variables) Valid/Invalids
Example
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);
}
Careful when using Units
/* Invalid */
--width: 10;
width: var(--width)px;
/* Valid */
--width: 10px;
width: var(--width);
/* Valid */
--width: 10;
width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
width: calc(1em * var(--width));
