CSS 변수를 사용하여 테마를 쉽게 만드는 방법

CSS 변수의 가장 좋은 용례 중 하나는 테마 생성입니다.여기까지 말하자면, 나는 단지 전체 응용 프로그램의 주제를 바꾸는 것을 가리키는 것이 아니다. 왜냐하면 이것은 네가 자주 해야 할 일이 아닐 수도 있기 때문이다.더 중요한 것은 구성 요소에 특정한 주제를 쉽게 만들 수 있다는 것이다.
예를 들어, 전자 상거래 제품을 카트에 추가된 것으로 표시해야 할 경우.또는 당신의 사이트는 비교적 어두운 사이드바 부분을 포함하는 관리 부분이 있습니다.
CSS 변수를 사용하면 이전보다 간단하고 유연한 방식으로 작업을 수행할 수 있습니다.본문에서 나는 어떻게 진행하는지 상세하게 설명할 것이다.

I’ve also created a screencast about theme creation in

설치

우리는 투자조합 사이트를 예로 들 것이다.우리의 목표는 우리 투자조합의 한 항목을 돋보이게 하여 사람들 속에서 뛰어나게 하는 것이다.기술적으로 말하자면, 우리는 우리가 특성을 원하는 특정한 항목에 하나의 종류를 추가함으로써 이 점을 실현할 것이다.
다음은 투자조합 사이트의 최초의 외관이다.

나는 더 이상 이 사이트의 HTML에 대해 토론하고 싶지 않다. 왜냐하면 그것은 매우 간단하기 때문이다. 나는 네가 HTML을 알고 있다고 가정한다.하지만 코드 수정에 관심이 있다면, Scrimba 놀이터를 만들었습니다.
이제 CSS로 바로 넘어가겠습니다.CSS 변수를 사용하기 전에 스타일시트입니다.

html, body {  
  background: #ffeead;  
  color: #ff6f69;  
}

h1, p {  
  color: #ff6f69;  
}

#navbar a {  
  color: #ff6f69;  
}

.item {  
  background: #ffcc5c;  
}

button {  
  background: #ff6f69;  
  color: #ffcc5c;  
}

보시다시피 우리는 여기에서 단지 세 가지 색깔을 사용했다. #ffeead, #ff9f96, #ffcc5c.그러나 우리는 그것들을 대량으로 중용하고 있다.따라서 이것은 CSS 변수의 완벽한 용례입니다.
그것을 사용하기 시작하려면, 우리는 우선 변수를 성명해야 한다.이 작업은 :root 위조 클래스에서 수행됩니다.

:root {  
  --red: #ff6f69;  
  --beige: #ffeead;  
  --yellow: #ffcc5c;  
}

그리고 우리는 간단하게 변수로 16진수 값을 교환할 것이다.

html, body {  
  background: var(--beige);  
  color: var(--red);  
}

h1, p {  
  color: var(--red);  
}

#navbar a {  
  color: var(--red);  
}

.item {  
  background: var(--yellow);  
}

button {  
  background: var(--red);  
  color: var(--yellow);  
}

현재 우리의 CSS에는 변수의 강력한 기능이 있습니다. 이것은 우리가 간단하게 --red 을 다른 내용으로 변경할 수 있다는 것을 의미하며, 이것은 전체 사이트에서 업데이트될 것입니다.
만약 당신이 이곳에서 무슨 일이 일어났는지 이해하기 어렵다면, 나의 Learn CSS Variables in 5 minutes article 를 보거나 참가 신청을 하세요

테마 만들기

이제 테마를 만듭니다.우리는 .featured 클래스를 네 개의 항목 중 하나에 추가하여 이 항목을 다른 항목에서 돋보이게 할 수 있기를 희망한다.구체적으로 말하면 우리는 빨간색#ff5564과 노란색#ffe55b으로 바꿀 것이다.
다음은 태그의 모양입니다.

<div class="item **featured**">  
  <h1>project d</h1>  
  <button>learn more</button>  
</div>

이 변경은 네 개의 다른 위치의 스타일에 영향을 주어야 한다.

배경색<div>

색상 <h1>

배경색<button>

색상 <button>

낡은 방법

우리가 이전에 이 문제를 해결한 방법은 .featured 항목의 모든 요소에 대해 사용자 정의 CSS 선택기를 만드는 것이다. 다음과 같다.

.featured {  
  background: #ffe55b;  
}

.featured > h1 {  
  color: #ff5564;  
}

.featured > button {  
  background: #ff5564;   
  color: #ffe55b;  
}

이런 방법은 그다지 유연하지 않다.문서 패키지 항목에 다른 요소를 추가하려면 특정한 선택기를 작성해야 합니다.

새로운 방식

그러나 CSS 변수가 있으면 더욱 쉬워진다.다음과 같이 클래스의 변수를 간단히 다시 작성합니다.

.featured {  
  --yellow: #ffe55b;  
  --red: #ff5564;  
}

CSS 변수가 상속되므로 .featured 에서 참조.featured 또는 --red의 모든 요소는 현재 전역 값이 아닌 국부 값을 사용합니다.따라서 --yellow 또는 <button> 요소는 변수의 국부 값을 자동으로 사용합니다.
다음은 페이지에서의 표현입니다.

보시다시피 프로젝트 d 항목은 다른 항목과 약간 다르게 보입니다.
깔끔해요, 아니면 뭐예요?
만약 우리가 더욱 복잡한 구성 요소, 예를 들어 전자상거래 응용 프로그램의 제품 항목을 구축하고 있다면 상황은 어떻게 될지 생각해 보세요.제목, 하위 제목, 단락, 이미지, 제목, 단추, 등급 등을 포함할 수 있습니다.모든 하위 항목에 사용자 정의 선택기를 만드는 것이 아니라 변수의 값을 간단하게 뒤집는 것이 더 쉽고 유연하다.
만약 당신이 이 기술에 대한 더 많은 정보를 알고 싶다면, 나의 무료 Scrimba를 보십시오.
읽어주셔서 감사합니다!저는 Per라고 합니다. 공동 창시자입니다. 저는 사람들이 새로운 기술을 배우는 것을 돕는 것을 좋아합니다.새 기사와 자원에 대한 통지를 받고 싶으시면 저에게 연락 주세요.