docs: add SCSS variables example

razonyang · Sep 9, 2022 · 59b3571 · 59b3571
1 parent 229e2f5
commit 59b3571
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 3 deletions.
diff --git a/exampleSite/content/docs/advanced/scss-variables/index.md b/exampleSite/content/docs/advanced/scss-variables/index.md
@@ -22,7 +22,33 @@ Thanks to `assets/main/scss/_variables.scss`, we have the ability to change the
 
 ## Why SCSS Variables?
 
-Although we can override the CSS via `assets/main/scss/_custom.scss`, but this will eventually increase the size of CSS bundle, however the SCSS variable does not.
+Although we can override the CSS via `assets/main/scss/_custom.scss`, this will eventually increase the size of CSS bundle, however the SCSS variable does not in most cases.
+
+For example, there is a default animation for logo on hover.
+
+```css
+{{% code/scss-variables-logo-animation %}}
+```
+
+It's able to disable it via custom SCSS.
+
+```scss {title="assets/main/scss/_custom.scss"}
+{{% code/scss-variables-disable-logo-animation %}}
+```
+
+But the previous style which we don't need still present in CSS bundle, since we just overrided it by the custom SCSS.
+
+```css
+{{% code/scss-variables-disable-logo-animation-output %}}
+```
+
+And the SCSS variables will not generate *unused* style into CSS bundle.
+
+```scss {title="assets/main/scss/_variables.scss"}
+$logo-animation: false;
+```
+
+Smaller CSS bundle size means better performance, so we recommend using SCSS variables when possible.
 
 ## Bootstrap SCSS Variables
 

diff --git a/exampleSite/content/docs/advanced/scss-variables/index.zh-hans.md b/exampleSite/content/docs/advanced/scss-variables/index.zh-hans.md
@@ -22,7 +22,33 @@ images = []
 
 ## 为什么选择 SCSS 变量？
 
-虽然我们可以通过 `assets/main/scss/_custom.scss` 覆盖 CSS，但这最终会增加 CSS 包的大小，但 SCSS 变量不会。
+虽然我们可以通过 `assets/main/scss/_custom.scss` 覆盖 CSS，但这最终会增加 CSS 包的大小，而大多情况下 SCSS 变量不会。
+
+举个例子， 鼠标悬停在 Logo 时有一个默认的动画。
+
+```css
+{{% code/scss-variables-logo-animation %}}
+```
+
+我们可以通过自定义 SCSS 以禁用它。
+
+```scss {title="assets/main/scss/_custom.scss"}
+{{% code/scss-variables-disable-logo-animation %}}
+```
+
+但因为我们只是覆盖了样式，之前我们不需要的样式仍会出现在 CSS bundle 中。
+
+```css
+{{% code/scss-variables-disable-logo-animation-output %}}
+```
+
+而 SCSS 则不会生成*未使用*的样式。
+
+```scss {title="assets/main/scss/_variables.scss"}
+$logo-animation: false;
+```
+
+较小的 CSS bundle 意味着更好的性能，所以我们建议尽可能使用 SCSS 变量。
 
 ## Bootstrap SCSS 变量
 

diff --git a/exampleSite/content/docs/advanced/scss-variables/index.zh-hant.md b/exampleSite/content/docs/advanced/scss-variables/index.zh-hant.md
@@ -22,7 +22,33 @@ images = []
 
 ## 為什麽選擇 SCSS 變量？
 
-雖然我們可以通過 `assets/main/scss/_custom.scss` 覆蓋 CSS，但這最終會增加 CSS 包的大小，但 SCSS 變量不會。
+雖然我們可以通過 `assets/main/scss/_custom.scss` 覆蓋 CSS，但這最終會增加 CSS 包的大小，而大多情況下 SCSS 變量不會。
+
+舉個例子， 鼠標懸停在 Logo 時有一個默認的動畫。
+
+```css
+{{% code/scss-variables-logo-animation %}}
+```
+
+我們可以通過自定義 SCSS 以禁用它。
+
+```scss {title="assets/main/scss/_custom.scss"}
+{{% code/scss-variables-disable-logo-animation %}}
+```
+
+但因為我們只是覆蓋了樣式，之前我們不需要的樣式仍會出現在 CSS bundle 中。
+
+```css
+{{% code/scss-variables-disable-logo-animation-output %}}
+```
+
+而 SCSS 則不會生成*未使用*的樣式。
+
+```scss {title="assets/main/scss/_variables.scss"}
+$logo-animation: false;
+```
+
+較小的 CSS bundle 意味著更好的性能，所以我們建議盡可能使用 SCSS 變量。
 
 ## Bootstrap SCSS 變量
 

diff --git a/exampleSite/layouts/shortcodes/code/scss-variables-disable-logo-animation-output.html b/exampleSite/layouts/shortcodes/code/scss-variables-disable-logo-animation-output.html
@@ -0,0 +1,7 @@
+.top-app-bar .logo:hover {
+    transform: none;
+}
+
+.top-app-bar .logo:hover {
+    transform: rotate(-5deg) scale(1.1);
+}
diff --git a/exampleSite/layouts/shortcodes/code/scss-variables-disable-logo-animation.html b/exampleSite/layouts/shortcodes/code/scss-variables-disable-logo-animation.html
@@ -0,0 +1,7 @@
+.top-app-bar {
+    .logo {
+        &:hover {
+            transform: none;
+        }
+    }
+}
diff --git a/exampleSite/layouts/shortcodes/code/scss-variables-logo-animation.html b/exampleSite/layouts/shortcodes/code/scss-variables-logo-animation.html
@@ -0,0 +1,3 @@
+.top-app-bar .logo:hover {
+    transform: rotate(-5deg) scale(1.1);
+}