순수 CSS의 CSS 변수 – 5분 이내에 시작하기

순수 CSS의 CSS 변수(또는 공식적으로는 사용자 정의 속성 )는 사용 방법을 배우는 데 5분을 투자하려는 사람이라면 누구나 시간을 크게 절약할 수 있습니다. CSS3부터 존재했으며 모든 사용자의 92%가 이를 지원하는 브라우저를 가지고 있습니다. CSS 변수를 사용하면 기존 스타일시트나 새 도구를 크게 변경할 필요가 없으며 이전 프로젝트에 쉽게 적용할 수 있습니다. 파일의 수백 위치에 16진수 색상 코드를 기록하는 대신 CSS 변수를 사용하여 한 위치에서 정의할 수 있습니다. 시간을 크게 절약하고 스타일시트의 일관성을 높이는 데 도움이 됩니다.

잠깐, 이것은 Saas 또는 Less입니다. 맞습니까?

아니요, 여기서 우리는 CSS가 Saas, Less 또는 SCSS와 같은 전처리기와 결합된 것이 아니라 순수한 CSS에 대해 이야기하고 있습니다. CSS 변수를 사용하는 데는 추가 도구, 편집기 또는 워크플로 또는 사용하는 기타 변경 사항이 필요하지 않습니다. 따라서 변수가 없는 기존 CSS 파일은 "특별한" 변경이 필요하지 않으며 혼합 및 일치할 수 있습니다. 파일의 일부에만 변수를 사용하거나 일부 파일에서만 프로젝트를 사용할 수 있습니다.

Saas 또는 Less와 같은 CSS 전처리기는 변수도 지원합니다. 또한 사용할 수 있는 기능과 옵션이 훨씬 더 많습니다. 그러나 이름에서 알 수 있듯이 SaaS로 작성된 CSS를 순수한 CSS로 변환하는 도구인 전처리기가 필요합니다. 변수만 필요한 경우 - 순수 CSS에는 필요한 모든 것이 있습니다.

CSS 변수는 기본 기능이며 이것이 바로 CSS 변수를 훌륭하게 만드는 이유입니다. 최소한의 노력으로 스타일시트를 훨씬 더 읽기 쉽고 일관성 있게 만들 수 있습니다. 또한 나중에 수행해야 하는 변경 작업이 훨씬 더 쉽습니다. 수백 곳에서 색상 코드를 변경해야 할 때 검색 및 바꾸기를 수행하는 것보다 확실히 빠릅니다 .

몇 가지 변수를 생성해 보겠습니다.

모든 프로그래밍 언어와 마찬가지로 변수를 사용하는 데에는 두 단계가 있습니다. 변수에 값을 부여하는 단계(변수 정의)와 변수를 사용하는 단계(값이 필요한 모든 위치에 변수를 놓는 단계)입니다. 우리도 똑같이 할 것입니다.

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

CSS 파일에서 전역적으로(어디서나) 변수를 사용하려면 :root 의사 클래스에서 변수를 정의해야 합니다. 파일의 위치는 중요하지 않습니다. 파일의 시작 부분이나 끝 부분에 있을 수 있습니다. 그러나 변수를 :root 에 넣어야 합니다. 이름은 이중 대시 -- 시작해야 하며 공백을 포함할 수 없습니다. CSS 변수는 일반적으로 CSS 속성에 할당하는 모든 값을 보유할 수 있습니다. 색상과 같은 단순한 값에서 배경이나 그림자와 같은 속기 속성에 대한 복잡한 표현에 이르기까지 다양합니다.

변수를 사용하려면(값을 가져오기 위해) var() 함수에 배치합니다. 모든 변수 이름이 -- 로 시작한다는 것을 잊지 마십시오. 이것이 시작하기 위해 알아야 할 모든 것입니다.

대체 값 사용

변수가 정의되지 않은 경우 두 번째 매개변수로 var() 함수에 대체 값을 제공할 수 있습니다.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

속성 값이 복잡한 경우 걱정하지 마십시오. fallback 매개변수는 쉼표를 허용합니다( box-shadow 예제 참조). 또한 .custom-text 색상에 대해 표시된 것처럼 여러 var() 함수를 연결할 수 있습니다. --my-red 및 --my-blue 변수가 정의되지 않은 경우 빨간색이 색상으로 사용됩니다.

var() 와 calc() )를 결합하는 것도 구문에 놀라움 없이 작동합니다. 다음은 정의된 클래스에서만 사용할 수 있는 지역 변수를 포함하는 예입니다.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

calc() 를 드물게 사용하십시오. 나쁜 것은 아니지만 과도하게 사용하면 디버그 및 유지 관리에 상당한 문제가 됩니다.

JavaScript를 통해 CSS 변수 가져오기 및 설정

일반 JavaScript를 사용하여 새 CSS 변수를 설정하고 해당 값에 액세스할 수 있습니다. 저는 이 방법을 사용하지 않습니다. 대신 요소의 클래스를 변경하는 것을 선호합니다. 그러나 JavaScript를 통해 CSS 변수에 액세스하려는 경우에는 아무런 문제가 없습니다. 어떤 상황에서는 확실히 사용할 수 있습니다. jQuery를 고수하는 사람들은 코드를 jQuery 플러그인으로 변환할 수 있습니다.

새 변수를 만들거나 기존 변수의 값을 변경하려면 다음을 사용하십시오.

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

변수에 접근하는 것은 조금 더 복잡합니다. 변수가 JS를 통해 정의된 경우 다음을 사용합니다.

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

그러나 CSS를 통해 정의된 경우(일반적으로 그럴 것입니다) 다음 코드를 사용하세요.

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

문제 및 주의해야 할 사항

이제 변수를 사용하는 방법을 알았으므로 너무 지나치게 사용하지 말고 스타일시트의 모든 단일 속성 값에 대한 변수를 생성하십시오. 예를 들어, 이것은 전체 개념을 과도하게 남용하는 것입니다.

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

당신은 아무것도 달성하지 못했습니다. 10px 대신 --spacing-10 을 얻었습니다. 5px에서 100px 사이의 모든 패딩 픽셀 값에 대해 20개 이상의 변수를 곧 생성하게 될 것입니다. 일관성을 유지하려면 --small-padding, --medium-padding, --large-padding 개념을 사용하고 적절한 숫자 값을 할당하십시오.

CSS 표준에 의해 요구되는 것은 아니지만 CSS 파일의 시작 부분과 한 곳에서 모든 변수를 정의할 것을 진심으로 제안합니다 . 그렇게 하면 그것들이 어디에 있는지 항상 알 수 있고 값을 신속하게 변경할 수 있습니다. 파일 전체에 정의를 흩뿌리면 추적하는 데 어려움을 겪을 수 있으며 여러 위치에서 동일한 변수를 정의하게 될 수 있습니다. 디버깅은 재미있는 작업이 아닙니다.

CSS 변수를 사용하지 않을 이유가 없습니다

인터넷에서는 상황이 빠르게 진행됩니다(예: 쿠키가 로컬 저장소로 대체됨). 큰 프로젝트와 큰 팀의 경우 Saas와 같은 CSS 전처리기로 전환하는 것이 올바른 방법입니다. 그러나 소규모 프로젝트나 유지 관리가 필요한 기존 프로젝트의 경우 순수 CSS의 CSS 변수가 올바른 솔루션 입니다. 변경, 소프트웨어 또는 도구 업그레이드 또는 기타 사항이 전혀 필요하지 않습니다. 변수를 정의하고 사용을 시작합니다.