ValidInvalids

命名在命名 CSS 變數時，它只包含字母和短劃線，就像其他 CSS 屬性一樣（例如：line-height，-moz-box-sizing）但它應該以雙短劃線（ - ）開頭

//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 變數區分大小寫

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

空 Vs 空間

/* Invalid */
    --color:;

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

級聯

    /* 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);
    }

使用單位時要小心

    /* 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));