CSS Variables

CSS Variables - Overriding Variables

이전 페이지(Overriding Variables)에서, 전역 변수는 전체 문서를 통해 액세스/사용할 수 있는 반면,
로컬 변수는 선언된 셀렉터 내에서만 사용할 수 있음을 배웠습니다.

이전 페이지(Overriding Variables)의 예제를 살펴보겠습니다.

    :root {
      /* Global variables */
      --blue: #1e90ff;
      --white: #ffffff;
    }
 
    body {
      background-color: var(--blue);
    }
 
    h2 {
      border-bottom: 2px solid var(--blue);
    }
 
    .container {
      color: var(--blue);
      background-color: var(--white);
      padding: 15px;
    }
 
    button {
      background-color: var(--white);
      color: var(--blue);
      border: 1px solid var(--blue);
      padding: 5px;
    }

때로는 페이지의 특정 섹션(section)에서만 변수가 변경되기를 원합니다.

버튼 요소에 대해 다른 색상(crimson)을 원한다고 가정합니다.
그런 다음 버튼 셀렉터 내에서 --blue 변수를 다시 선언할 수 있습니다.
이 셀렉터 내부에서 var(-blue)를 사용하면, 여기에 선언된 로컬 --blue 변수값이 사용됩니다.

로컬 --blue 변수가 버튼 요소에 대한 전역 --blue 변수를 중단하는(override) 것을 볼 수 있습니다.

    :root {
      /* Global variables */
      --blue: #1e90ff;
      --white: #ffffff;
    }
 
    body {
      background-color: var(--blue);
    }
 
    h2 {
      border-bottom: 2px solid var(--blue);
    }
 
    .container {
      color: var(--blue);  // override global variable with local variable
      background-color: var(--white);
      padding: 15px;
    }
 
    button {
      --blue: crimson;
      background-color: var(--white);
      color: var(--blue);
      border: 1px solid var(--blue);
      padding: 5px;
    }

변수가 한 곳에서만 사용되는 경우, 다음과 같이 새 지역 변수를 선언할 수도 있습니다.

  <style>
    :root {
      /* Global variables */
      --blue: #1e90ff;
      --white: #ffffff;
    }
 
    body {
      background-color: var(--blue);
    }
 
    h2 {
      border-bottom: 2px solid var(--blue);
    }
 
    .container {
      color: var(--blue);
      background-color: var(--white);
      padding: 15px;
    }
 
    button {
      --button-green: green;  /* declare new local variable */
      background-color: var(--white);
      color: var(--button-green); /* new local variable */
      border: 1px solid var(--button-green);  /* new local variable */
      padding: 5px;
    }