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

CSS 사용자 정의 속성이라고도 하는 CSS 변수를 사용하면 CSS 스타일시트에서 쉽게 재사용할 수 있습니다. WordPress 하위 테마로 작업을 완료했다면 아마도 많은 스타일을 지정하고 색상, 패딩 등과 같은 항목을 재정의하는 자신을 발견하게 될 것입니다. 웹 디자인이 처음이라면 일반 CSS. CSS 변수는 선택 사항이며 고급 단계로 갈수록 변수가 어떻게 도움이 되는지 알게 될 것입니다.

이들은 CSS 전처리기를 대체하기 위한 것이 아니며 가장 널리 사용되는 SASS입니다. 저는 특히 대규모 프로젝트에 SASS를 사용하고 CSS 변수와 함께 핵심 요소로 모든 고급 옵션을 제공합니다. 그러나 이전에 전처리기로 작업한 적이 있다면 CSS를 출력하려면 컴파일해야 한다는 것을 알고 있습니다. 이러한 이유로 이 튜토리얼에서는 CSS 변수에 초점을 맞추고 전처리기에 대한 세부 정보는 다루지 않을 것입니다.

CSS 변수는 행복한 매체입니다. 다행히도 강력한 브라우저 지원이 있습니다. 프로덕션에서 사용하기로 약속하기 전에 Can I Use를 확인하여 필요한 지원이 있는지 확인하십시오. 일반 CSS로 작업하는 것보다 효율적이지만 SASS와 같은 고급 설정이 필요하지 않습니다. 브라우저는 "컴파일"을 수행하며 컴파일된 CSS를 출력하는 설정 및 환경에 의존하지 않습니다.

이 접근 방식은 간단한 WordPress 자식 테마 스타일 지정과 같은 작업에 적합한 프로젝트입니다. 이와 같은 프로젝트에서는 브랜드 테마를 만들기 위해 스타일을 업데이트해야 하는 경향이 있습니다. 관리 가능한 스타일 재정의 목록이 있고 SASS를 CSS로 컴파일하는 환경을 설정할 필요가 없다는 사실이 마음에 듭니다.

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

Flywheel에서 사이트를 호스팅하면 멋진 대시보드에서 바로 30개 이상의 프리미엄 WordPress 테마(Genesis! 포함)에 액세스할 수 있습니다. $2,000가 넘는 금액으로 월 $15에 시작할 수 있습니다! 여기에서 자세히 알아보세요.

CSS 변수를 사용하는 방법

브랜드를 유지하기 위해 특정 색상을 사용할 때 한 가지 일반적인 요구 사항은 계속해서 사용할 수 있는 브랜드 색상 팔레트를 갖는 것입니다. 매번 같은 색상 값을 입력하는 것은 중복됩니다. 또한 세트의 색상 값 중 하나를 변경하려면 어떻게 해야 합니까? 예를 들어 파란색은 약간 더 어두워야 합니다. 이것은 항상 발생합니다. 예, 물론, 신뢰할 수 있는 찾기 및 교체가 있습니다. 그러나 한 곳에서 값을 조정하는 것이 이 전역 변경을 수행할 때와 변수를 재사용할 때 더 효율적입니다.

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

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

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

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

var() 함수

변수는 실제로 어떻게 사용됩니까? 아주 간단합니다. 먼저 변수를 선언한 다음 필요한 CSS 규칙 집합에서 사용합니다. 범위는 알아야 할 중요한 사항입니다. 변수는 의도한 범위 내에 있는 CSS 선택기 내에서 선언해야 합니다. 많은 경우 전역 범위에서 사용할 수 있는 변수가 필요합니다. 그래야 모든 항목에 액세스할 수 있습니다. 전역 범위에 대해 :root 또는 body 선택기를 사용할 수 있습니다. 그러나 범위를 제한해야 하고 로컬 범위 변수로 작업하려는 경우가 있을 수 있습니다.

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

var() 의 구문은 매우 간단합니다.
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

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

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

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

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

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

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

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

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

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

다음 단계: 플러그인

개발자를 위한 가장 권장되는 플러그인 목록을 보려면 이 eBook을 다운로드하십시오! 우리는 이 모든 플러그인이 사용하기 간편하고 사이트에서 성능이 너무 무겁지 않으며 완전히 신뢰할 수 있다는 것을 발견했습니다.

이 기사가 마음에 드시나요? 다음 중 하나를 시도하십시오.

• CSS 그리드 레이아웃을 사용하여 카드 레이아웃을 만드는 방법
• 효율적인 레이아웃을 위해 Flexbox와 CSS 그리드를 결합하는 방법
• Genesis 하위 테마에 대한 간단한 사용자 지정