jobdone-shared-files 1.1.20-beta.1 → 1.1.20-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/styleNew/README.md +83 -0
- package/styleNew/scss/Common/Animation.scss +1 -1
- package/styleNew/scss/Common/SelectableTable.scss +1 -1
- package/styleNew/scss/Common/Tree.scss +1 -1
- package/styleNew/scss/Common/filepond.scss +1 -1
- package/styleNew/scss/Layout/LayoutBase.scss +1 -1
- package/styleNew/scss/Layout/LayoutInnerColumn.scss +1 -1
- package/styleNew/scss/Layout/LayoutProject.scss +1 -1
- package/styleNew/scss/Layout/LayoutSinglePage.scss +1 -1
- package/styleNew/scss/Layout/LayoutTwoColumn.scss +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Dart Sass 升級指南
|
|
2
|
+
|
|
3
|
+
本專案已將所有 SCSS 檔案從舊版 LibSass 語法升級至 Dart Sass 語法。
|
|
4
|
+
|
|
5
|
+
## 主要變更
|
|
6
|
+
|
|
7
|
+
### 1. @import 替換為 @use
|
|
8
|
+
- ❌ 舊版: `@import "file"`
|
|
9
|
+
- ✅ 新版: `@use "file" as *` 或 `@use "file"`
|
|
10
|
+
|
|
11
|
+
### 2. 顏色函數更新
|
|
12
|
+
- ❌ 舊版: `lighten($color, 20%)`
|
|
13
|
+
- ✅ 新版: `color.adjust($color, $lightness: 20%)`
|
|
14
|
+
|
|
15
|
+
- ❌ 舊版: `darken($color, 20%)`
|
|
16
|
+
- ✅ 新版: `color.adjust($color, $lightness: -20%)`
|
|
17
|
+
|
|
18
|
+
- ❌ 舊版: `mix($color1, $color2)`
|
|
19
|
+
- ✅ 新版: `color.mix($color1, $color2)`
|
|
20
|
+
|
|
21
|
+
### 3. 數學函數 (如需要)
|
|
22
|
+
- ❌ 舊版: `$width / 2`
|
|
23
|
+
- ✅ 新版: `math.div($width, 2)` 或直接使用 `calc($width / 2)`
|
|
24
|
+
|
|
25
|
+
## 檔案結構
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
styleNew/
|
|
29
|
+
├── css/
|
|
30
|
+
│ └── vue-loading-overlay/
|
|
31
|
+
│ └── index.css (未變更)
|
|
32
|
+
└── scss/
|
|
33
|
+
├── Common/
|
|
34
|
+
│ ├── Animation.scss
|
|
35
|
+
│ ├── filepond.scss
|
|
36
|
+
│ ├── SelectableTable.scss
|
|
37
|
+
│ ├── thumbnail-group.scss
|
|
38
|
+
│ └── Tree.scss
|
|
39
|
+
├── Components/
|
|
40
|
+
│ └── ModalFileRepository.scss
|
|
41
|
+
├── Layout/
|
|
42
|
+
│ ├── LayoutBase.scss
|
|
43
|
+
│ ├── LayoutInnerColumn.scss
|
|
44
|
+
│ ├── LayoutProject.scss
|
|
45
|
+
│ ├── LayoutSinglePage.scss
|
|
46
|
+
│ └── LayoutTwoColumn.scss
|
|
47
|
+
└── Settings/
|
|
48
|
+
├── _bs-variables.scss
|
|
49
|
+
├── _bs-variables-dark.scss
|
|
50
|
+
├── _color-mode.scss
|
|
51
|
+
├── _custom-variables.scss
|
|
52
|
+
├── _Mixins.scss
|
|
53
|
+
└── _MobileVariables.scss
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 重要提醒
|
|
57
|
+
|
|
58
|
+
1. **原始檔案未被修改** - 所有舊版檔案仍保留在 `style/` 資料夾中
|
|
59
|
+
2. **Bootstrap 相容性** - 使用 `@use` 時需確保 Bootstrap 版本支援 Dart Sass
|
|
60
|
+
3. **命名空間** - 使用 `@use "file" as *` 可以不使用命名空間，直接存取變數和 mixin
|
|
61
|
+
|
|
62
|
+
## 編譯方式
|
|
63
|
+
|
|
64
|
+
使用 Dart Sass 編譯：
|
|
65
|
+
```bash
|
|
66
|
+
sass styleNew/scss/Layout/LayoutBase.scss output.css
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 注意事項
|
|
70
|
+
|
|
71
|
+
- Dart Sass 不再支援 `/` 作為除法運算子，請使用 `math.div()` 或 `calc()`
|
|
72
|
+
- `@import` 將在未來版本中完全移除，建議全面改用 `@use` 和 `@forward`
|
|
73
|
+
- 顏色函數如 `lighten()`, `darken()` 已棄用，請使用 `color.adjust()` 或 `color.scale()`
|
|
74
|
+
|
|
75
|
+
## 參考資源
|
|
76
|
+
|
|
77
|
+
- [Dart Sass 官方文件](https://sass-lang.com/documentation)
|
|
78
|
+
- [從 LibSass 遷移到 Dart Sass](https://sass-lang.com/documentation/breaking-changes)
|
|
79
|
+
- [Bootstrap 5 與 Dart Sass](https://getbootstrap.com/docs/5.3/customize/sass/)
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
升級日期: 2025年12月24日
|