CSS 변수를 사용한 동적 브랜드 주제화

최근에 저는 전자상거래 결제 페이지 생성기(코드 없는 도구)를 개발하기 시작했습니다. 업체는 자신의 브랜드에 따라 주제를 변경할 수 있습니다.업체는 단추, 용기, 텍스트 등 다양한 요소에 브랜드 색상과 2차 색상을 설정할 수 있습니다. 이 설정은 API를 사용하여 얻을 수 있으며, 나타나는 결제 페이지에 적용됩니다.나는SASS/LESS/Stylus 변수, JS 라이브러리의 CSS와 응용 테마의 CSS 변수 등 여러 가지 방법을 모색하고 있다.심도 있는 탐색을 통해 나는 최종적으로 CSS 변수를 사용했다.본고에서 저는 각 방법의 장단점과 최종적으로 CSS 변수를 어떻게 사용하는지 설명하고 싶습니다.

SASS/LESS/펜 변수:

CSS 프로세서는 스크립트 언어로 개발자가 변수, 함수, 혼합 등을 사용하여 줄기 스타일을 작성할 수 있도록 합니다. 이 줄기 스타일은 컴파일할 때 원시 CSS 스타일로 변환됩니다.만약 우리가 컴파일할 때 주제와 관련된 모든 정보를 알게 된다면, 우리는 그것들을 이 변수에 쉽게 비추어 주제화를 실현할 수 있다.결산은 반드시 상인이 운행할 때 동태적으로 주제를 바꾸는 것을 허락해야 하기 때문에 우리는 이런 방법을 채택할 수 없다.

JS 라이브러리의 CSS:

시장에는 많은 Js 라이브러리의 CSS가 있는데 예를 들면 스타일화된 구성 요소, 감정, 매력 등이다. 이것들은 모두 광범위한 주제화 지원을 제공했다.그러나 이 라이브러리는 테마 상하문을 제공하기 위해 <ThemeProvider />가 필요합니다.공급업체 잠금은 이 기능을 사용하는 또 다른 단점이다.미래에 우리는 쉽게 다른 방법으로 전환할 수 없을 것이다.우리가 전통적인 CSS 방법에 익숙해지면서 학습 곡선도 가파르게 변했다.

CSS 변수:

CSS 변수 a.k.a 사용자 정의 속성을 사용하면 런타임에 Javascript를 사용하여 동적으로 값을 변경할 수 있습니다.우리는 var () 을 사용하여 스타일시트의 인용에 변수를 사용할 수 있습니다.CSS 또는 javascript에서 CSS 변수의 값을 지정할 수 있습니다.최신 버전의 CSS 브라우저는 다양한 변수를 지원합니다.본 컴퓨터의 CSS는 CSS 변수를 지원하고 학습 곡선도 얕기 때문에 저는 CSS 변수를 제 테마 시스템으로 사용하는 것을 더욱 좋아합니다.
shippingaddress부분,payment부분,cart부분을 포함하는 간단한 결제 페이지를 만듭니다.상인은 이런 부분에 brandColor, secondaryColor, bodyBackgroundColor와 var()를 배치할 수 있다.

단계 1 - 체크 아웃된 요소에 변수 매핑

각 변수를 체크 아웃된 요소에 매핑합니다.
brandColor - 기본 버튼, 로고 및 테두리 색상
secondaryColor - 쿠폰 신청 입력 그룹에서 사용
body Background Color - 이 색상은 기본 컨테이너의 배경색으로 사용됩니다.

2단계 - 스타일시트에서 CSS 변수를 사용합니다.

CSS 변수를 속성에 지정하려면 brandColorvariable를 사용해야 합니다.secondaryColor를 사용하는 선택기를 보여 주세요.이 변수의 값은 실행할 때 자바스크립트 설정을 사용합니다.

bodyBackgroundColor 변수는 쿠폰 버튼을 적용하는 데 사용됩니다

getMerchantConfigfunction 응용 프로그램에 적용되는 마스터 컨테이너

Step 3 — Creating Merchant configuration JSON

테마 생성기 구성은 서버의 API를 통해 공개됩니다.JSON의 구성은 다음과 같습니다

은(는) 데모를 위해 정적 JSON으로 서버 응답을 시뮬레이션합니다.merchantId 매개변수를 사용하여 사업자 구성을 분석하겠다는 약속을 반환합니다

Step 4 — Setting values for CSS variables in Javascript

Javascript에 변수를 설정하는 방법을 보여 줍니다.변수는 전체 스타일시트에서 사용되므로 루트 요소에 변수를 설정합니다

const root = document.querySelector(':root');
root.style.setProperty('--brandColor', merchant.brandColor);
root.style.setProperty('--secondaryColor', merchant.secondaryColor);
root.style.setProperty('--bodyBackgroundColor', merchant.bodyBackgroundColor);

지금 우리는 상인의 테마 설정을 받아야 합니다.상점 1이 활동 상태에 있다고 가정하다.merchantIdgetMerchantConfig를 전달하여 merchant1 함수를 호출해야 합니다

const setTheme = async () => {
  const merchant = await getMerchantConfig('merchant1');
  const root = document.querySelector(':root');
  root.style.setProperty('--brandColor', merchant.brandColor);
  root.style.setProperty('--secondaryColor',     merchant.secondaryColor);
  root.style.setProperty('--bodyBackgroundColor', merchant.bodyBackgroundColor);
};
setTheme();

최종 Js 코드는 다음과 같습니다

이 정도면 우리는 이미 끝났어😎. 코드 펜에서 실행 중인 프레젠테이션을 볼 수 있습니다.다른 MerchantId를 getMerchantConfig 함수에 전달해서 조작할 수 있습니다.글꼴 크기, 글꼴 계열 등 다른 속성을 설정할 수도 있습니다.

<br>

Conclusion:

CSS 변수를 사용하면 테마 설정을 간소화할 수 있습니다.공급업체 잠금이 없습니다.CSS 변수는 기본 CSS에서 지원되며 브라우저 호환성이 우수합니다.그것은 나의 기능에 가장 적합하다.CSS 변수는 주제화보다 잠재력이 있습니다.그것은 대량의 중복 임무를 줄였다.한번 해봐도 돼요.나는 여기에 아주 좋은 자원을 첨부했다

Reference

이 문제에 관하여(CSS 변수를 사용한 동적 브랜드 주제화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mathumitha/dynamic-brand-theming-using-css-variables-2kbd

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)