CSS 변수: 빠른 가이드

Even though CSS Variables aka Custom Properties have been more than usable for 3-4 years now, not everyone knows about them or uses them.

They are a great addition to CSS. One of the best since CSS 3. A lot of new features are coming and are announcing a great time for CSS again!

I will write a short series about them and we will go deeper into their use.

그들은 어떻게 작동합니까?

이 그림을 보면 3가지를 알 수 있습니다.

최상위 수준/루트 수준

CSS 변수는 루트 수준에서 선언됩니다. 그것은 의무가 아니며 우리는 그것을 탐구할 것이지만 그것은 표준 접근 방식이 되었습니다.

:root {
 --main-bg-color: grey;
 --font-family: 'Overpass', sans-serif;
 --font-medium: 16px;
}

선언 및 사용 방법

-- 변수에서 하듯이 이중 하이픈SASS과 이름으로 선언합니다.--main-bg-color 대 $main-bg-color
당신은 그것들에 가치를 더합니다. 글꼴 모음, 글꼴 크기, 간격, URL 이미지 등이 될 수 있습니다.

--name: value;

var() 함수의 사용

이를 읽으려면 var() 함수를 사용하고 다음 두 가지를 추가합니다.

첫 번째는 변수 자체입니다.

var(--main-bg-color)

두 번째는 변수가 정의되지 않은 경우 기본값입니다.

var(--main-bg-color, lightgrey)

--main-bg-color가 없으면 기본 색상은 lightgrey입니다.

그것들을 사용하면 어떤 이점이 있습니까?

✅ 작성, 사용 및 유지 관리가 쉽습니다. 모든 CSS 파일에서 재사용할 수 있습니다. 구성 요소 및 공유 속성/값으로 작업할 때 매우 유용합니다.

🚀 로컬 범위에서 변경할 수 있습니다. 다음 기사에서 다루겠습니다.

⚙️ 런타임에 액세스할 수 있습니다. 브라우저에서 변수 하나를 변경하여 디자인에 미치는 영향을 확인할 수 있습니다. 빌드 시간 전처리기로는 불가능합니다. JavaScript로 액세스할 수 있습니다. JavaScript로 만들거나 사용하거나 변경할 수 있습니다.

🔲 🔳 CSS에서 다크/라이트 모드 또는 여러 테마로 작업할 때 완벽합니다. 예제를 추가하고 SASS 변수 사용과 비교해 보겠습니다. 거기도 가세요 😉