기초튜토리얼 Sass를 사용하여 JavaScript 컴포넌트의 스타일을 지정하는 방법
페이지 정보
작성자 GrapeCity
작성일 2023-08-01 11:38 조회 169회
댓글 0건
본문
첨부파일
관련링크
를 사용하면 간단하게 작업을 실행할 수 있습니다.
Wijmo에는 FlexGrid와 같이 매우 복잡한 요소를 포함하여 많은 컴포넌트가 존재합니다.
우리는 작업을 더 쉽게 실행하기 위해 Sass를 완전히 활용해 보고자 합니다.
Sass를 이용하면 고객님을 위해 모든 컴포넌트의 테마를 쉽게 구축할 수 있습니다.
Sass 몇 줄만을 사용하여 완전한 Wijmo 테마를 구축하는 과정을 함께 살펴보겠습니다.
원활한 진행을 위해 샘플을 다운로드해 주세요!
JavaScript 응용 프로그램으로 시작
CSS를 위해 Sass를 사용하는 간단한 JavaScript 응용 프로그램으로 시작하겠습니다.
다음을 사용하여 응용 프로그램에 Wijmo를 이미 설치했다고 가정합니다.
npm install @grapecity/wijmo.purejs.all
모든 Wijmo 테마가 해당 명령으로 설치됩니다. 이는 테마를 구축하는 데 필요한 모든 항목이 포함되어 있습니다.
Wijmo Sass 및 CSS 파일 모두 해당 단일 패키지에 들어 있습니다.
패키지에는 다음 항목들이 존재합니다.
📄wijmo.scss |
컴파일하고 변수를 적용하는 메인 파일 |
📁 misc |
테마를 위한 유틸리티가 포함되어 있습니다. Wijmo 테마에서 사용 가능한 모든 변수를 확인하려면 여기에서 variables.scss를 참조하는 것이 좋습니다. |
📁 parts |
이 항목을 사용할 필요는 없지만, 개별 컴포넌트에 대한 모든 CSS 규칙이 포함되어 있습니다. 자유롭게 확인해 보세요! |
📁 themes |
Wijmo에 사용할 수 있는 모든 테마가 포함되어 있습니다. 여기에서 원하는 테마와 비슷한 테마를 찾거나 테마를 구축하는 방법을 알아보는 것이 좋습니다. |
새 테마 추가
우리 테마와 비슷하게 보이는 테마를 찾아보겠습니다.
여러 테마를 테스트할 수 있습니다.
오른쪽 위의 드롭다운에서 테마를 선택하여 컴포넌트의 모양을 확인해 보세요.
\@grapecity\wijmo.styles\themes 디렉토리에서 찾아보세요!
이 자습서에서는 Cleanlight를 사용합니다. 해당 wijmo.theme.cleanlight.scss 파일을 복사하여 루트 디렉토리에 붙여 넣겠습니다. (css 파일을 보관하는 어느 위치에나 붙여 넣을 수 있습니다)
테마를 잃어버리거나 덮어쓰일 일이 없게 하려면 Wijmo 패키지 디렉토리에 보관하지 않는 것이 좋습니다. 테마는 항상 자체 응용 프로그램(또는 여러 앱 간에 공유할 계획인 경우 자체 패키지)에 있어야 합니다.
파일 이름을 원하는 이름으로 바꾸세요. 여기서는 wijmo.theme.custom.scss로 지정하겠습니다.
응용 프로그램에 사용자 정의 Wijmo 테마가 포함되었습니다.
테마 파일의 두 부분에 대해 살펴보겠습니다.
첫 번째 섹션에서는 변수를 설정합니다. (기본 변수를 덮어씁니다.)
두 번째 섹션에서는 wijmo.scss 파일을 가져와 해당 변수를 적용합니다.
테마를 node_module에서 루트 디렉토리로 옮겼으므로, 테마 파일의 끝에 있는 @import 문의 경로를 변경해야 합니다.
새 경로는 다음과 같은 모습이 됩니다.
@import "../node_modules/@grapecity/wijmo.styles/wijmo.scss";
새 테마 참조
응용 프로그램에는 기본 CSS 규칙이 있는 styles.scss 파일이 포함되어 있으며 이전에 Wijmo 테마를 가져왔습니다. 이제 대신 새 테마를 가져오려고 합니다. 이 파일의 끝에서 새 테마를 가져오겠습니다(이 샘플에서는 styles.scss 파일과 동일한 디렉토리에 있습니다).
우리의 응용 프로그램에는 기본 CSS 규칙이 포함된 styles.scss 파일이 있으며 이전에 Wijmo 테마를 가져왔습니다.
새 테마를 위해 파일의 끝에 새 테마를 가지고 와 보겠습니다. 이번 샘플에서는 styles.scss 파일과 동일한 디렉터리에 있습니다.
@import "wijmo.theme.custom.scss";
응용 프로그램 자체에 대해서는 컴파일된 css 파일만 app.js로 가져옵니다.
import './styles.css';
응용 프로그램 실행
응용 프로그램에서는 이미 Sass를 사용하고 있지만 사용법에 대해 확실히 하고 싶습니다. 먼저, package.json에 sass 패키지가 필요합니다.
"sass": "^1.60.0",
다음으로, 스크립트를 수정하여 'sass-dev' 명령을 추가하고 scss 파일을 css 파일로 컴파일합니다.
응용 프로그램을 실행하기 전에 'sass-dev' 명령을 실행하도록 'start' 명령을 수정합니다.
"scripts": {
"sass-dev": "sass --style=expanded src:src",
"start": "npm run sass-dev && lite-server"
}애플리케이션에서 상단 항목을 설정한 후(이미 'npm install'을 실행했다는 가정하에) 다음을 실행할 수 있습니다.
npm run start
응용 프로그램이 새 테마를 사용하여 실행되는 모습을 볼 수 있습니다.
테마 사용자 정의
이제 우리는 원하는 테마로 사용자 정의할 수 있습니다. 편의상 variables.scss 파일을 열고 내용을 새 테마의 상단에 복사한 다음, 주석 처리하는 것이 좋습니다.
이러한 변수 옆에는 이미 스타일을 지정하는 항목을 설명하는 작은 주석이 있으며, 기본값도 표시됩니다.
다음은 가능한 모든 변수가 추석 처리된 사용자 정의 테마 파일 상단의 예입니다.
// all variables with defaults // $wj-bkg: white !default; // content background // $wj-txt: black !default; // content foreground // $wj-bdr-clr: rgba(0,0,0,.2) !default; // content border color // $wj-bdr-wid: 1px !default; // content border width // $wj-bdr: $wj-bdr-wid solid $wj-bdr-clr !default; // content border // $wj-bdr-rad: 4px !default; // content border radius // $wj-box-shadow: 0 6px 13px rgba(0,0,0,.2) !default; // box shadow for drop-downs/dialogs // $wj-invalid: red !default; // invalid state markers // $wj-item-pdg: 4px 6px 3px 6px !default; // item padding (listbox items, grid cells, etc) // $wj-item-hvr: rgba(0,0,0,.05) !default; // item hover // $wj-tdn-focus: .4s !default; // focus/hover transition duration // $wj-disabled-opacity: .6 !default; // opacity for disabled controls/items // $wj-disabled-bkg: safechangecolor($wj-bkg, 6%) !default; // background for disabled controls/items // $wj-hdr-bkg: #eee !default; // header element background // $wj-hdr-hvr: safedarken($wj-hdr-bkg, 5%) !default; // header element hover background // $wj-hdr-txt: #444 !default; // header element foreground // $wj-btn-bkg: #eee !default; // button background // $wj-btn-hvr: safedarken($wj-btn-bkg, 5%) !default; // button hover background // $wj-btn-txt: $wj-txt !default; // button text // $wj-btn-grp-bdr: $wj-bdr !default; // button group border // $wj-sel-bkg: #0085c7 !default; // selected element background // $wj-sel-txt: white !default; // selected element foreground // $wj-msel-bkg: #80adbf !default; // extended selection background // $wj-msel-txt: white !default; // extended selection foreground // $wj-accent-bkg: $wj-sel-bkg !default; // accent background (like drag markers) // $wj-accent-txt: $wj-sel-txt !default; // accent background (like drag markers) // $wj-cell: $wj-bkg !default; // cell background // $wj-cell-alt: safedarken($wj-cell, 3%) !default; // alternating cell background // $wj-cell-frz: null !default; // frozen cell background // $wj-cell-frz-alt: null !default; // alternating frozen cell background // $wj-cell-frz-txt: $wj-txt !default; // frozen cell foreground // $wj-cell-pdg: $wj-item-pdg !default; // cell padding // $wj-cell-bdr-clr: rgba(0,0,0,.2) !default; // cell border color // $wj-cell-bdr: 1px solid $wj-cell-bdr-clr !default; // cell border // $wj-cell-bdr-vrt: $wj-cell-bdr !default; // cell vertical border // $wj-cell-bdr-hrz: $wj-cell-bdr !default; // cell horizontal border // $wj-cell-grp-bkg: safedarken($wj-hdr-bkg, 5%) !default; // group row background // $wj-cell-grp-txt: $wj-hdr-txt !default; // group row foreground // $wj-cell-frz-bdr-clr: safedarken($wj-hdr-bkg, 30%) !default; // frozen cell border color // $wj-cell-frz-bdr: 1px solid $wj-cell-frz-bdr-clr !default; // frozen cell border // $wj-cell-frz-bdr-vrt: $wj-cell-frz-bdr !default; // frozen area vertical border // $wj-cell-frz-bdr-hrz: $wj-cell-frz-bdr !default; // frozen area horizontal border // $wj-tooltip: $wj-bkg !default; // tooltip background // $wj-tooltip-txt: $wj-txt !default; // tooltip text // $wj-error-tooltip: red !default; // error tooltip background // $wj-error-tooltip-txt: white !default; // error tooltip text // $wj-bkg-grd: false !default; // content background gradient // $wj-btn-grd: false !default; // button background gradient // $wj-hdr-grd: false !default; // header background gradient // $wj-input-grd: false !default; // input element background gradient
참고할 점 대부분의 Wijmo 테마는 모든 변수를 덮어쓰지 않습니다.
기본값에서 변경할 변수만 덮어쓰면 됩니다. 이는 그중 일부에 불과합니다.
좋습니다. 이제 새 테마를 사용자 정의하겠습니다. 다음은 새 테마에 포함할 항목의 짧은 목록입니다.
(셀 내, 버튼 등) 더 현대적인 모습을 위한 더 큰 패딩(여백)
검은색/진한 회색 텍스트
헤더 용 멋진 보랏빛 회색
메인 콘텐츠 용 흰색 배경
하이라이트 용 청록색
그리드의 셀 테두리 제거
보라색 툴팁
다음은 테마 전체의 내용입니다.
몇 줄만으로 변수를 설정하여 Wijmo의 모든 JavaScript 컴포넌트의 스타일을 지정할 수 있습니다.
//////////////////////////////////////////////////////////////// // set variables // $wj-bkg: rgb(255, 255, 255); $wj-txt: #000000; $wj-item-pdg: 8px 6px 7px 6px !default; // item padding (listbox items, grid cells, etc) $wj-hdr-bkg: rgb(234, 227, 236); $wj-hdr-txt: #2e2e2e; $wj-sel-bkg: rgb(13, 148, 119); $wj-sel-txt: #fff; $wj-msel-bkg: rgb(31, 167, 137); $wj-msel-txt: #fff; $wj-cell-grp-bkg: rgb(196, 186, 199); $wj-cell-grp-txt: #202020; $wj-cell-frz: #d6e6ed; $wj-cell-frz-alt: #c4dbe5; $wj-cell-bdr-clr: rgba(0,0,0,.2); $wj-cell-bdr: 0px solid $wj-cell-bdr-clr !default; // cell border $wj-btn-bkg: rgb(13, 148, 119); $wj-btn-txt: #fff; $wj-btn-grp-bdr: none; $wj-tooltip: rgb(213, 179, 245); $wj-tooltip-txt: #2b2121; //////////////////////////////////////////////////////////////// // apply variables // @import "../node_modules/@grapecity/wijmo.styles/wijmo.scss";
결과는 다음과 같습니다.
마쳤습니다. 계속해서 원하는 만큼 테마를 조정할 수 있습니다.
테마 재사용
이미 테마 구축을 완료했지만, 여러 응용 프로그램 간에 이 테마를 공유하려면 어떻게 해야 할까요? 물론 테마를 복사하여 붙여 넣을 수 있지만, 다른 방법이 있습니다.
이 테마를 별도의 프로젝트에서 관리하고 이 테마만 npm(또는 자체 비공개 레지스트리)에 게시하는 방법도 있습니다.
그러면 원하는 응용 프로그램에서 npm을 통해 공유된 테마를 설치하고 가져올 수 있습니다. 많은 팀과 응용 프로그램 간에 테마를 공유하는 대규모 회사의 경우 이 방법이 가장 좋은 방법입니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
