CSS [11] – 변수, Variable 사용법

CSS Tutorial – Full Course for Beginners

Lesson 20 – Variables

/* || VARIABLES */
:root {
  /* COLOR */
  --BGCOLOR: #475569;
  --ALT-BGCOLOR: #1E203B;

}

/* || GENERAL STYLES */
body {
  font: 1.5rem "Nunito", sans-serif;
  min-height: 100vh;

  background-color: var(--BGCOLOR);
  background-image: radial-gradient(whitesmoke, var(--BGCOLOR));
  display: flex;
  flex-direction: column;
}

• 코드의 재사용과 유지보수성을 위해 변수를 사용
• :root 가상 클래스를 사용

.special {
  --PADDING: 0.1rem;
}

• 특정 선택자에만 변수를 덮어쓸 수 있음

@media (prefers-color-scheme: dark) {
  :root {
    --BGCOLOR: #000;
    --ALT-BGCOLOR: #333;
  }
}

• 같은 방식으로 특정 미디어 쿼리에만 변수를 덮어쓸 수 있음