Sass를 사용한 JavaScript 스타일 사용자 정의
페이지 정보
작성자 GrapeCity
작성일 2018-07-24 14:26 조회 4,774회
댓글 0건
본문
관련링크
Sass 소개
Sass (Syntactically Awesome Style Sheets)는 CSS 사전 처리기(preprocessor)로, 개발자가 한 언어로 코드를 작성한 다음 CSS로 정렬하여 CSS를 확장하는 스크립트 언어입니다. CSS 사전 처리는 CSS에 다양한 기능 (변수, 중첩 규칙 및 믹스인(mixin))을 추가할 수 있도록 하여, 코딩 프로세스를 단순화합니다. Sass는 TypeScript가 일반 JavaScript를 개선하는 것과 같은 방식으로 CSS를 개선합니다. 모듈화, 변수, 구조, 컴파일 시간 구문 검사(compiles time syntax checking) 및 함수를 제공합니다.
최근 Wijmo CSS 파일을 보다 쉽게 만들고 관리 할 수 있도록, Sass로 전환했습니다. 지난 몇 년 동안 Sass는 가장 널리 사용되는 가장 인기있는 CSS 사전처리기(preprocessor)가 되었습니다.
Sass를 지원하는 대표적인 프레임워크는 아래와 같습니다 :
TypeScript와 마찬가지로 Sass는 선택 사항입니다. Sass로 빌드한 CSS 파일을 사용할 수 있습니다. 그러나 Wijmo 스타일을 사용자 정의하여 고유 한 테마를 작성하거나, 사용하는 Wijmo 모듈만 포함된 사용자 정의 CSS 파일을 작성하려면 Sass를 사용하는 것을 권장합니다.
Sass 도구 사용
Sass를 사용하기로 선택한 경우, 아래와 같은 인기 있는 Sass 도구를 사용할 수 있습니다:
우리는 인기와 기능 때문에 다른 CSS 프로세서보다 Sass를 선택했습니다. Sass를 사용하면 Wijmo 스타일링을 이미 사용중인 도구와 쉽게 통합 할 수 있습니다.
Sass를 사용해야하는 몇 가지 추가 이유 :
- 모듈성(Modularity) . 다른 언어와 마찬가지로, 만약 잘 정의 된 아키텍처 및/또는 조직적인 패턴 없이 CSS를 작성하면 유지 관리가 어렵습니다. 하지만, Wijmo 모듈 당 하나의 SCSS 파일을 사용합니다.
- 변수 . 테마를 만들려면 변수가 필수적입니다. 여러 규칙에서“#005c8f”를 다른 값으로 바꾸는 것보다“$ wj-sel-bkg” 변수의 값을 변경하는 것이 더 쉽고 안전합니다.
- 구조 . Sass는 규칙 중첩을 지원하므로 간결하고 일관된 방식으로, 규칙을 보다 쉽게 작성할 수 있습니다. 또한 "글로벌 변수(global variables)"로 작동하는 너무 많은 to-level 셀렉터(Selector)로 부터 CSS 네임스페이스를 오염시키려는 유혹을 줄입니다.
- 컴파일 시간 오류 점검 . CSS 속성 또는 값의 철자를 잘못 입력하면, Sass가 컴파일 타임에 이를 알려줍니다. 이것은 많은 시간과 좌절을 줄일 수 있습니다.
Wijmo JavaScript 스타일 및 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";
Web Compiler 또는 다른 Sass 도구를 통해, 이를 실행하면 크기가 약 64 및 51k 인 일반 wijmo.css 및 wijmo.min.css 출력 파일을 얻게 됩니다.
사용자 정의 CSS를 사용하여 더 작은 CSS 파일 작성
Wijmo 엔터프라이즈 모듈을 사용하지 않고 CSS 파일의 크기를 줄이려면, 위 의 wijmo.scss와 같은 wijmo-core.scss 파일을 작성할 수 있습니다. 마지막 다섯 줄 (Wijmo 엔터프라이즈 모듈이 포함된 줄)을 생략해야 합니다.
이것은 wijmo-core.css의 파일과 wijmo-core.min.css을 만듭니다. 이것은 원본 사이즈의 절반인 31K와 25K를 밖에 되지 않습니다.
하지만 다행히도 우리는 이미 위의 작업을 여러분의 고성능 앱 개발을 위해 대신 완료했습니다! wijmo-core.css의 파일은 우리의 배포판에 포함되어 있습니다. 이 방법을 사용하면 응용 프로그램에 필요한 모듈만 포함하는 최적화 된 CSS 파일을 생성할 수 있습니다.
사용자 정의 CSS 테마 작성
Wijmo는 표준 wijmo.css 파일 외에도 많은 사용자 정의 테마를 포함합니다. 대부분의 테마는 몇 가지 변수의 값을 재정의하여 만들어집니다. 예를 들어, cerulean 테마는 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.scss 파일을 포함하기 전에 일부 Wijmo 변수를 설정합니다. 그것이 전부입니다. 출력은 표준 wijmo.css 대신 사용할 수 있는 wijmo.theme.cerulean.css 파일입니다 .
이는 테마 파일이 표준 wijmo.css를 바꾸지 않고 필요로하는 것만 확장하기 때문에, 이를 통해 로드할 파일이 줄기 때문에 페이지 로딩 속도가 빨라집니다.
사용자 정의 CSS를 사용하여 동적 테마 작성
CSS 변수는 최신 브라우저 (Edge, Chrome, Firefox, Safari)에서 이미 사용 가능합니다. 런타임시 CSS 규칙에 적용되는 변수를 정의할 수 있습니다. CSS 변수가 동적이라는 점을 제외하면 Sass 및 LESS의 변수와 동일합니다.
Wijmo Sass 변수를 변수 표현식으로 설정하여, Wijmo에서 CSS 변수를 사용할 수 있습니다. 예를 들어,이 wijmo.themes.vars.scss 파일을 참고하십시오.
// wijmo vars theme (using CSS variables)
body {
--mdl-primary: red;
--mdl-primary-light: pink;
--mdl-accent: green;
}
$mdl-primary: var(--mdl-primary);
$mdl-primary-light: var(--mdl-primary-light);
$mdl-accent: var(--mdl-accent);
@import "wijmo.theme.material.scss";
이 파일은 몇 가지 Wijmo SCSS 변수를 CSS 변수 표현식 (var (--*))으로 설정합니다. 이 작업이 완료되면 Sass는 wijmo.theme.vars.css 파일의 모든 관련 CSS 규칙에 할당을 전파합니다.
런타임에 CSS 변수의 값을 변경하면 변경 사항이 적용되고, 페이지 모양이 즉시 변경됩니다. CSS를 다시 컴파일하거나 다시 로드 할 필요가 없습니다.
예를 들어, 몇 가지 Wijmo InputColor 컨트롤을 사용하여 페이지 색상을 변경할 수 있습니다 .
var style = document.body.style,
computedStyle = getComputedStyle(document.body);
// change primary color
new wijmo.input.InputColor('#clrPrimary', {
showAlphaChannel: false,
value: computedStyle.getPropertyValue('--mdl-primary').trim(),
valueChanged: function (s, e) {
style.setProperty('--mdl-primary', s.value);
style.setProperty('--mdl-primary-light', lighten(s.value, .2));
}
});
// change accent color
new wijmo.input.InputColor('#clrAccent', {
showAlphaChannel: false,
value: computedStyle.getPropertyValue('--mdl-accent').trim(),
valueChanged: function (s, e) {
style.setProperty('--mdl-accent', s.value);
}
});
// change accent color
new wijmo.input.InputColor('#clrAccent', {
showAlphaChannel: false,
value: computedStyle.getPropertyValue('--mdl-accent').trim(),
valueChanged: function (s, e) {
style.setProperty('--mdl-accent', s.value);
}
});
궁극적으로 TypeScript와 마찬가지로 Sass는 선택 사항입니다. Sass로 빌드 한 CSS 파일을 사용할 수 있습니다. 그러나 Wijmo 스타일을 사용자 정의하여, 고유한 테마를 작성하거나, 사용하는 Wijmo 모듈만 포함된 사용자 정의 CSS 파일을 작성하려면 Sass를 사용하는 것이 좋습니다.
댓글목록
등록된 댓글이 없습니다.
