WordPress 자식 테마를 사용자 지정하기 위해 CSS 변수를 추가하는 방법

CSS 사용자 정의 속성이라고도 하는 CSS 변수를 사용하면 CSS 스타일시트에서 쉽게 재사용할 수 있습니다.

WordPress 차일드 테마로 작업을 했다면 색상, 패딩 등과 같은 항목을 재정의하고 스타일을 지정하는 작업을 많이 했을 것입니다. 웹 디자인을 처음 접하는 경우 일반 CSS. CSS 변수는 선택 사항이며 고급 기능을 사용하면 변수가 어떤 이점이 있는지 알 수 있습니다.

이것은 SASS가 가장 널리 사용되는 CSS 전처리기를 대체하기 위한 것이 아닙니다. 많은 빌더는 특히 대규모 프로젝트에 SASS를 사용하며 CSS 변수와 함께 핵심 부분으로 많은 고급 옵션을 제공합니다.

그러나 이전에 전처리기로 작업한 적이 있다면 CSS를 출력하기 위해 컴파일해야 한다는 것을 알고 있습니다. 이러한 이유로 이 자습서에서는 CSS 변수에 초점을 맞추고 전처리기에 대한 자세한 내용은 다루지 않습니다.

CSS 변수는 행복한 매체이며 다행스럽게도 강력한 브라우저 지원이 있습니다. 프로덕션에서 CSS 변수를 사용하기로 결정하기 전에 Can I Use를 확인하여 필요한 지원이 있는지 확인하십시오.

CSS 변수는 일반 CSS로 작업하는 것보다 더 효율적이지만 SASS와 같은 고급 설정이 필요하지 않습니다. 브라우저는 "컴파일"을 수행하며 컴파일된 CSS를 출력하는 설정 및 환경에 의존하지 않습니다.

이 접근 방식은 간단한 WordPress 자식 테마 스타일 지정과 같은 작업에 적합한 프로젝트입니다. 이와 같은 프로젝트의 경우 브랜드 테마를 만들기 위해 스타일을 업데이트해야 하는 경향이 있습니다. CSS 변수는 관리 가능한 스타일 재정의 목록을 제공하고 SASS를 CSS로 컴파일하기 위한 특별한 환경이 필요하지 않기 때문에 도움이 될 수 있습니다.

Genesis Framework 및 StudioPress 테마를 무료로 받으세요!

WP Engine 고객은 모든 계획에 기본으로 제공되는 프리미엄 WordPress 테마 모음에 액세스할 수 있습니다! 월 $20에 다음 사이트 구축을 시작할 수 있습니다! 여기에서 자세히 알아보세요.

CSS 변수를 사용하는 방법

브랜드를 유지하기 위해 특정 색상을 사용할 때 한 가지 일반적인 요구 사항은 반복해서 사용할 수 있는 브랜드 색상 팔레트를 갖는 것입니다. 매번 같은 색상 값을 입력하는 것은 중복됩니다. 또한 세트의 색상 값 중 하나를 변경하려면 어떻게 해야 합니까?

예를 들어 파란색은 약간 더 어두워야 할 수 있습니다. 이것은 항상 발생합니다. 예, 물론 신뢰할 수 있는 찾기 및 교체가 있습니다. 그러나 한 곳에서 값을 조정하는 것이 이 전역 변경을 수행하고 변수를 재사용할 때 더 효율적입니다.

CSS 변수는 다음과 같습니다.

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

WordPress 자식 테마의 스타일을 지정하기 위한 워크플로를 간소화하면서 내 styles.css 파일에 변수를 추가했습니다. 이것은 "짧은 목록"일 뿐이며 더 많이 추가됨에 따라 각 변수를 효율적으로 명명하는 것이 중요해집니다.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

var() 함수

변수는 실제로 어떻게 사용됩니까? 꽤 간단합니다. 먼저 변수가 선언된 다음 필요한 CSS 규칙 집합에서 사용됩니다.

범위는 알아야 할 중요한 사항입니다. 변수는 의도한 범위 내에 있는 CSS 선택기 내에서 선언되어야 합니다. 대부분의 경우 전역 범위에서 변수를 사용할 수 있어야 모든 항목에 액세스할 수 있습니다. 전역 범위에 대해 :root 또는 body 선택기를 사용할 수 있습니다. 그러나 범위를 제한해야 하고 로컬 범위 변수로 작업하려는 경우가 있을 수 있습니다.

변수를 쉽게 찾을 수 있습니다. 그들은 그들 앞에 두 개의 대시가 있습니다. 두 개의 대시(–)를 포함해야 합니다.

var() 구문은 매우 간단합니다.

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

여러 곳에서 색상을 조정하는 대신 변수 값을 한 번에 조정합니다.

웹 검사기(이 경우 Chrome)를 사용하면 사용 중인 변수를 검사하고 확인할 수 있습니다.

다음 예제에서는 먼저 --light-gray 및 --text-black 이라는 전역 사용자 지정 속성을 정의합니다. var() 함수가 호출되어 나중에 스타일시트에 사용자 정의 속성 값을 삽입합니다.

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

변수는 CSS 중단점으로 작업할 때 매우 유용할 수 있음을 언급할 가치가 있습니다. 다양한 중단점에서 전역 범위 변수를 사용하면 패딩 및 기타 유용한 스타일을 다양한 크기에 맞게 사용자 지정할 수 있습니다.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

다음은 로컬 범위에서 찾을 수 있는 변수의 예입니다. 지금까지 전역 범위에 대해서만 다루었으므로 루트에 항목이 없다는 것을 알 수 있습니다. 경고 메시지의 스타일입니다. 여기에는 이 클래스에만 유용한 경고 텍스트 색상이 선언되어 있습니다. 또한 calc 도 활용할 수 있다는 점은 주목할 가치가 있습니다.

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

위의 예는 CSS 변수의 기본 사항을 다룹니다. 이러한 개념은 사용자 지정 WordPress 테마 또는 작성하는 다른 사용자 지정 CSS에 적용할 수 있습니다. 변수는 일반 CSS에 비해 이점이 있으며 사이트 전체를 변경할 때 보다 효율적으로 작업하는 데 도움이 됩니다. 전처리기가 필요 없이 더 잘 구성된 스타일시트를 허용합니다.

WP 엔진으로 창작의 자유 촉진

WP 엔진은 WordPress에서 창작할 수 있는 자유를 제공합니다. 모든 WordPress 제공업체 중에서 가장 빠른 이 회사의 제품은 150만 개의 디지털 경험을 지원합니다. 전 세계 상위 200,000개 사이트 중 더 많은 사이트가 WP 엔진을 사용하여 WordPress의 다른 누구보다 디지털 경험을 강화합니다. wpengine.com에서 자세한 내용을 확인하거나 오늘 담당자에게 문의하십시오!