5.20202.699
5.20202.699

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 file
misc
    _constants.scss         // color names
    _glyphs.scss            // Wijmo glyphs
    _mixins.scss            // utility functions
    _variables.scss         // theme variables
core                        // modules in Wijmo core
    _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
    _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.csswijmo.min.css 출력이 표시됩니다.

작은 사이즈의 CSS 파일

당신이 Wijmo 엔터프라이즈 모듈을 사용하지 않고, 당신의 CSS 파일의 크기를 감소하려는 경우, wijmo.scss의 마지막 다섯 줄을 제거함으로서 wijmo-core.scss 파일을 생성할 수 있습니다.

전체 wijmo.css 크기의 약 절반인 wijmo-core.css 파일이 생성됩니다 .

다행히도 우리는 이미 이것을 제공하고 있습니다. wijmo-core.css의 파일은 배포판에 포함되어 있습니다. 이 방법을 사용하면 응용 프로그램에 필요한 모듈만 포함하는 최적화 된 CSS 파일을 생성 할 수 있습니다. 예를 들어 inputgrid 모듈에 대한 규칙 만 포함하는 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에서 변경된 것입니다.