사실 아주 오래 전에 있었어요. 최근에야 알았어요.
이름은 사용자 정의 속성입니다.
사용자 정의 속성
　 https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
# IE는 예에 따라 지원되지 않음
Qiita는 과거에도 소개한 적이 있는 것 같습니다.
CSS Variables(사용자 정의 속성)는 CSS를 더욱 편리하게 합니다!
　 https://qiita.com/kyota/items/bd5d291809415cc2d7b1

뭐 공부 해요?

Sass/LESS의 변수 정의는 CSS를 단독으로 사용할 수도 있습니다.
그냥 그렇다면 Sass/LESS의 기능이 더 많기 때문에 이런 결론을 내릴 수 있지만 저는 개인적으로 동적으로 변경할 수 있는 부분이 즐겁다고 생각합니다.

구체적인 예

자주 사이트에서 텍스트 크기의 대중소를 전환할 수도 있고 주제를 전환할 수도 있다.
그것도 사용자 정의 속성으로 이루어질 수 있을 것 같습니다.
zoom이라는 기능도 있지만 Firefox에서는 움직이지 않는 것 같고 표준적인 기능도 아닌 것 같습니다.
　zoom
　 https://developer.mozilla.org/ja/docs/Web/CSS/zoom
그래서 실제로 만들어진 시위 행진은 여기에 있다.

갈색 커튼석
　 http://megyo.jp/software/samples/css-var-sample/index.html
사이트 소스 이동(GitHub)
　 https://github.com/uemegu/Sampes/tree/master/css-var-sample
프레젠테이션에서 두 가지 모드의 방법으로 변수를 개작하다.

// 変数だけを定義したCSSを読み込み直す
document.getElementById("button").onclick = () => {
    const link = document.querySelector('link[rel="stylesheet"]');
    link.href = link.href.includes('variables1.css') ? 'variables2.css' : 'variables1.css';
};

// JavaScriptでカスタムプロパティを書き換える
document.getElementById('button2').onclick = () => {
    const color = document.documentElement.style.getPropertyValue('--background');
    document.documentElement.style.setProperty('--background', color === 'black' ? 'white' : 'black');
};

또한 Sass와 조합하여 사용할 수도 있습니다(LESS 확인 안됨).

:root {
  --font-size: 18px
}
$font_size_normal: var(--font-size);

총결산

실제 업무에서는 아직 사용하지 않았지만 IE를 고려하지 않아도 사용할 수 있는 장면이 많죠.
나는 오늘 IE가 이 세상에서 사라지는 것이 일하는 방식의 개혁이라고 생각한다.