Wijmo와 Sass
최근 Wijmo CSS 파일을보다 쉽게 만들고 관리 할 수 있도록 Sass로 전환했습니다.
Sass는 TypeScript가 JavaScript를 개선하는 것과 같은 방식으로 CSS를 향상시킵니다. 모듈화, 변수, 구조, 컴파일 타임 구문 검사, 선택기 중첩, 함수 등을 제공합니다. 지난 몇 년 동안 Sass는 가장 널리 사용되는 CSS 프리프로세서가 되었으며 모든 인기있는 JavaScript 프레임워크 및 번들 도구에서 지원됩니다.
TypeScript와 마찬가지로 Sass는 선택 사항입니다. 그러나 Wijmo 스타일을 사용자 정의하거나 자신만의 테마를 만들거나, 사용하는 Wijmo 모듈만 포함하는 작은 CSS 파일을 만들려면 Sass를 사용하는 것이 좋습니다.
Sass를 사용하기로 선택한 경우, Sass 도구가 사용됩니다. 저희가 가장 좋아하는 것은 아래와 같습니다:
폴더 구조
Wijmo의 Sass 파일에는 다음과 같은 폴더 구조를 사용합니다.
wijmo.scss // main scss 파일
misc
_constants.scss // color name(색깔 이름)
_glyphs.scss // Wijmo glyphs(글리프)
_mixins.scss // utility functions (지원 함수)
_variables.scss // theme variables(테마 변수)
core // modules in Wijmo core (Wijmo 코어에 있는 모듈)
_chart.scss
_chart_hierarchical.scss
_chart_interaction.scss
_core.scss
_gauge.scss
_grid.scss
_grid_filter.scss
_grid_grouppanel.scss
_input.scss
_nav.scss
enterprise // modules in Wijmo enterprise (Wijmo 엔터프라이즈에 있는 모듈)
_chart_finance.scss
_multirow.scss
_olap.scss
_sheet.scss
_viewer.scss
themes // bundled themes
wijmo.theme.cerulean.scss
wijmo.theme.cleandark.scss
wijmo.theme.cleanlight.scss
// etc
Sass 규칙에 따라 밑줄로 시작하는 이름을 가진 파일은 다른 파일에 포함되며, 독립형 CSS 파일을 생성하지 않습니다.
wijmo.scss의 파일은 우리의 주요 CSS 파일을 생성하는 데 사용됩니다, wijmo.css. 다음이 포함됩니다.
// wijmo.scss
// misc
@import "misc/mixins"; // functions
@import "misc/constants"; // named colors
@import "misc/variables"; // theme variables
@import "misc/glyphs"; // wijmo glyphs
// core modules
@import "core/core";
@import "core/input";
@import "core/grid";
@import "core/grid_grouppanel";
@import "core/grid_filter";
@import "core/chart";
@import "core/chart_interaction";
@import "core/chart_hierarchical";
@import "core/gauge";
@import "core/nav";
// enterprise modules
@import "enterprise/sheet";
@import "enterprise/multirow";
@import "enterprise/olap";
@import "enterprise/viewer";
@import "enterprise/chart_finance";
웹 컴파일러 또는 다른 Sass 도구를 통해, 이를 실행하면 일반 wijmo.css 및 wijmo.min.css 출력이 표시됩니다.
작은 사이즈의 CSS 파일
당신이 Wijmo 엔터프라이즈 모듈을 사용하지 않고, 당신의 CSS 파일의 크기를 감소하려는 경우, wijmo.scss의 마지막 다섯 줄을 제거함으로서 wijmo-core.scss 파일을 생성할 수 있습니다.
전체 wijmo.css 크기의 약 절반인 wijmo-core.css 파일이 생성됩니다 .
다행히도 우리는 이미 이것을 제공하고 있습니다. wijmo-core.css의 파일은 배포판에 포함되어 있습니다. 이 방법을 사용하면 응용 프로그램에 필요한 모듈만 포함하는 최적화 된 CSS 파일을 생성 할 수 있습니다. 예를 들어 input 및 grid 모듈에 대한 규칙만 포함하는 CSS 파일을 작성할 수 있습니다 .
커스텀 테마
Wijmo 는 표준 wijmo.css 파일 외에도 많은 사용자 정의 테마를 포함합니다. 대부분의 테마는 몇 개의 Sass 변수 값을 재정의하여 만들어집니다. 예를 들어, cerulean 테마는 wijmo.theme.cerulean.scss 파일에서 작성됩니다.
// wijmo.theme.cerulean.scss -- cerulean theme
$wj-bkg: #fcfcfc;
$wj-txt: #082d43;
$wj-bdr: none;
$wj-hdr-bkg: #033c73;
$wj-hdr-txt: #fff;
$wj-sel-bkg: #2a9fd6;
$wj-msel-bkg: #77afc9;
$wj-cell-grp-bkg: #777777;
//� etc �
@import "../wijmo.scss";
테마 파일은 일부 Wijmo 변수를 설정한 후 기본 wijmo.scss 파일을 포함하고 있습니다. 그렇기 때문에 wijmo.theme.cerulean.css 파일은 표준 wijmo.css 대신하여 사용할 수 있습니다.
참고 : 테마 파일은 독립적입니다. 표준 wijmo.css 파일을 확장하지 않고 대체합니다. 이것은 이전 버전의 Wijmo에서 변경된 것입니다.