p {
    color: #8B008B;
}
p {
    color: #8B008B;
}
h1 {
    background-color: #8B008B;
}
div {
    border-color: #8B008B;
}
...
p {
    color: #A9A9A9;
}
h1 {
    background-color: #A9A9A9;
}
div {
    border-color: #A9A9A9;
}
...
:root {
    --primary-color: #8B008B;
    /* 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 --primary-color라는 변수 이름으로 저장한다. */
}
p {
    color: var(--primary-color);
    /* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
h1 {
    background-color: var(--primary-color);
    /* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
div {
    border-color: var(--primary-color);
    /* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
...
:root {
    --primary-color: #A9A9A9; /* 보라색(#8B008B)을 짙은 회색(#A9A9A9)으로 변경함 */
}
p {
    color: var(--primary-color);
}
h1 {
    background-color: var(--primary-color);
}
div {
    border-color: var(--primary-color);
}
...
selector { /* 선택자는 변수가 적용되는 범위를 결정하는데 사용함 */
    --primary-color: #8B008B;
    /* --변수명: 값 */
}
p { /* 이 선택자는 변수를 정의한 선택자의 하위 요소 즉 자손 요소이어야 함 */
    color: var(--primary-color); /* color: #8B008B;와 동일함 */
    /* var(정의한 변수이름) 형식으로 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
h1 { /* 이 선택자는 변수를 정의한 선택자의 하위 요소 즉 자손 요소이어야 함 */
    background-color: var(--primary-color); /* background-color: #8B008B;와 동일함 */
    /* var(정의한 변수이름) 형식으로 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
div { /* 이 선택자는 변수를 정의한 선택자의 하위 요소 즉 자손 요소이어야 함 */
    border-color: var(--primary-color); /* border-color: #8B008B;와 동일함 */
    /* var(정의한 변수이름) 형식으로 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
<div class="one">
    one
    <div class="two">
        two
        <div class="three">tree</div>
        <div class="four">four</div>
    </div>
</div>
.two {
    --test: 10px;
}

.three {
    --test: 2em;
}
div {
    fon-size: var(--test);
}
fon-size: var(--test)의 결과 화면
:root {
    --font-size: 15px;
}
p {
    font-size: var(--font-size);
}

@media (max-width: 1024px) {
    :root {
        --font-size: 13px;
    } 
}
var(--변수이름[, 대체 값]);
:root {
    --primary-color: #00a0e9;
}
.container {
    color: var(--primary-color, #1a1aff);
    background-color: var(--secondary-color, #3333ff);  /* --secondary-color 변수는 정의되어 있지 않음 */
}
.container {
    background-color: var(--my-var, var(--my-background, pink));
    /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
}
.container {
  background-color: var(--my-var, --my-background, pink);
  /* 유효하지 않음: "--my-background, pink" */
}
.container {
    background-color: var(--my-var, --my-primary-background);
    /* 유효하지 않음(대체 값이 없는 변수는 대체 값으로 사용할 수 없음) : "--my-primary-background" */
}

caniuse.com에서 더 자세한 정보를 확인해 보세요.