css 에서 변수(커스텀 프로퍼티) 사용

1. CSS 변수(커스텀 프로퍼티)를 쓸 때는 반드시 앞에 -- 를 붙여야 함

2. 대/소문자 구분 함

.g-6, .gy-6 {
    --bs-gutter-y: 1.5rem;
}

 

이렇게 선언 하면,

자식 요소 또는 같은 선택자 내부에서 사용 가능

.g-6 {
  padding-bottom: var(--bs-gutter-y);
}

.g-6 > .child {
  margin-top: var(--bs-gutter-y);
}

 

아래처럼 관계 없는 선택자에는 사용 불가

.other-class {
  padding-top: var(--bs-gutter-y); /* ❌ 작동 안 함 */
}

 

전역 변수로 사용하고 싶을땐 아래 처럼 사용 (:root가 일반적이고 명확 함)

:root {
  --bs-gutter-y: 1.5rem;
}

html {
  --bs-gutter-y: 1.5rem;
}

body {
  --bs-gutter-y: 1.5rem;
}

html, body {
  --bs-gutter-y: 1.5rem;
}

등등..