[pornel]

These are not like SASS variables. I think calling this variables is causing unnecessary confusion.

This feature adds custom properties. CSS had custom vendor properties like `-webkit-foo`, and now you can have your own properties with vendor == "", so it's `--foo`.

[bshimmin]

I think this is just a problem of nomenclature. In CSS, a statement such as

  font-color : red;

comprises a "property" (left) and a "value" (right). The draft W3C proposal allows you to specify a "custom property" and assign a value to it, thus:

  --header-bg-colour : #ff5533;

You can then reference this elsewhere by saying:

  header { background-color : var(--header-bg-colour); }

Isn't that just how you use a variable (written as $header-bg-colour) in Sass?

[pornel]

The similarity is only superficial. SASS variables are lexically scoped. CSS properties are cascading.

[bshimmin]

There is that. Over in the real world, I suspect most people will put their CSS variables in ::root and leave it at that.