From aac04d89b30042a2cbdd6c81ef515b4eaae573ad Mon Sep 17 00:00:00 2001
From: zhangwen <1062680993@qq.com>
Date: Wed, 18 May 2022 17:19:34 +0800
Subject: [PATCH] fix: change style docs

---
 docs/guides/basic/style.md           | 100 ++++++++++++---------------
 docs/guides/intro/getting-started.md |   2 +-
 2 files changed, 44 insertions(+), 58 deletions(-)

diff --git a/docs/guides/basic/style.md b/docs/guides/basic/style.md
index 926c62c0..a5019156 100644
--- a/docs/guides/basic/style.md
+++ b/docs/guides/basic/style.md
@@ -4,63 +4,49 @@ path: 'style'
 order: 50
 ---
 
-`ngx-gantt` 使用了 `css` 预处理器 `scss`，支持重写组件的大部分的色值和部分 layout 样式。
+`ngx-gantt` 使用了 `css` 预处理器 `scss`，支持重写组件的大部分的色值和部分 layout 样式。示例如下：
 
 ```scss
-// basic
-$gantt-color: #333 !default;
-$gantt-header-height: 44px !default;
-$gantt-border-color: #eee !default;
-$gantt-bg-color: #fff !default;
-$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
-$gantt-container-background-color: #fafafa !default;
-$gantt-item-height: 44px !default;
-$gantt-group-background-color: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-group-height: 44px !default;
-$gantt-table-td-padding: 0 15px !default;
-
-// calendar
-$gantt-date-primary-color: #888 !default;
-$gantt-date-primary-font-size: 14px !default;
-$gantt-date-primary-border: #ddd !default;
-$gantt-date-secondary-color: #333 !default;
-$gantt-date-secondary-font-size: 14px !default;
-$gantt-date-secondary-weekend-color: #aaa !default;
-$gantt-date-week-backdrop-bg: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-date-today-color: #ff9f73 !default;
-$gantt-date-today-text-color: #fff !default;
-
-// bar
-$gantt-bar-bg: #fff !default;
-$gantt-bar-layer-bg: #fff !default;
-$gantt-bar-handle-color: #cacaca !default;
-$gantt-bar-handle-height: 12px !default;
-$gantt-bar-background-color: #348fe4 !default;
-
-// drag
-$gantt-item-drag-mask-color: #348fe4 !default;
-$gantt-link-dragging-line-color: #348fe4 !default;
-
-// link
-$gantt-link-line-color: #348fe4 !default;
-
-// table
-$gantt-table-header-drag-line-width: 3px !default;
-$gantt-table-header-drag-line-color: #348fe4 !default;
-```
-
-示例：
-
-```
-$gantt-color: #000;
-$gantt-bg-color: #fafafa;
-
-@import '~@worktile/gantt/styles/index.scss';
-
+@use '@worktile/gantt/styles/variables.scss' with (
+  // basic
+  $gantt-color: #333,
+  $gantt-header-height: 44px,
+  $gantt-border-color: #eee,
+  $gantt-bg-color: #fff,
+  $gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15),
+  $gantt-container-background-color: #fafafa,
+  $gantt-item-height: 44px,
+  $gantt-group-background-color: rgba($color: #f3f3f3, $alpha: 0.5),
+  $gantt-group-height: 44px,
+  $gantt-table-td-padding: 0 15px,
+
+  // calendar
+  $gantt-date-primary-color: #888,
+  $gantt-date-primary-font-size: 14px,
+  $gantt-date-primary-border: #ddd,
+  $gantt-date-secondary-color: #333,
+  $gantt-date-secondary-font-size: 14px,
+  $gantt-date-secondary-weekend-color: #aaa,
+  $gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5),
+  $gantt-date-today-color: #ff9f73,
+  $gantt-date-today-text-color: #fff,
+
+  // bar
+  $gantt-bar-bg: #fff,
+  $gantt-bar-layer-bg: #fff,
+  $gantt-bar-handle-color: #cacaca,
+  $gantt-bar-handle-height: 12px,
+  $gantt-bar-background-color: #348fe4,
+
+  // drag
+  $gantt-item-drag-mask-color: #348fe4,
+  $gantt-link-dragging-line-color: #348fe4,
+
+  // link
+  $gantt-link-line-color: #348fe4,
+
+  // table
+  $gantt-table-header-drag-line-width: 3px,
+  $gantt-table-header-drag-line-color: #348fe4
+);
 ```
diff --git a/docs/guides/intro/getting-started.md b/docs/guides/intro/getting-started.md
index 4d7f5c88..beec6827 100644
--- a/docs/guides/intro/getting-started.md
+++ b/docs/guides/intro/getting-started.md
@@ -45,7 +45,7 @@ export class AppModule {
 在 style.scss 中引入预构建样式文件
 
 ```
-@import "~@worktile/gantt/styles/index.scss";
+@use "@worktile/gantt/styles/index.scss";
 ```
 
 ### 组件中使用