From d507f3efd95c32e3e142f9074cc8738758891405 Mon Sep 17 00:00:00 2001 From: LeoKu <czc12580520@gmail.com> Date: Sun, 31 Oct 2021 10:41:44 +0800 Subject: [PATCH] refactor: remove global import scss variables --- src/App.vue | 20 +++++++++++--------- src/components/ActionBar.vue | 6 ++++-- src/components/CodeModal.vue | 22 +++++++++++++--------- src/components/Configurator.vue | 22 ++++++++++++---------- src/components/DownloadModal.vue | 20 +++++++++++--------- src/layouts/Container.vue | 6 ++++-- src/layouts/Footer.vue | 8 +++++--- src/layouts/Header.vue | 14 ++++++++------ src/layouts/Sider.vue | 6 ++++-- src/styles/global.scss | 5 ++++- src/styles/{variables.scss => var.scss} | 0 vite.config.ts | 8 -------- 12 files changed, 76 insertions(+), 61 deletions(-) rename src/styles/{variables.scss => var.scss} (100%) diff --git a/src/App.vue b/src/App.vue index 041b3b5..3f554c2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -207,12 +207,14 @@ function handleAction(actionType: ActionType) { </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .main { width: 100%; height: 100%; overflow: hidden; - color: $color-text; - background-color: $color-page-bg; + color: var.$color-text; + background-color: var.$color-page-bg; .content-warpper { height: 100%; @@ -242,7 +244,7 @@ function handleAction(actionType: ActionType) { align-items: center; justify-content: center; - @media screen and (max-width: $screen-sm) { + @media screen and (max-width: var.$screen-sm) { transform: scale(0.85); } } @@ -259,21 +261,21 @@ function handleAction(actionType: ActionType) { height: 2.5rem; margin: 0 1rem; padding: 0 1rem; - color: $color-text; + color: var.$color-text; font-weight: bold; - background: $color-gray; + background: var.$color-gray; border-radius: 0.6rem; cursor: pointer; transition: color 0.2s; user-select: none; &:hover { - color: lighten($color-text, 10); + color: lighten(var.$color-text, 10); } &:disabled, &[disabled] { - color: rgba($color-text, 0.5); + color: rgba(var.$color-text, 0.5); cursor: default; } } @@ -307,14 +309,14 @@ function handleAction(actionType: ActionType) { } .gradient-top { - @include gradient-style($color-secondary); + @include gradient-style(var.$color-secondary); top: -50%; right: -20%; } .gradient-bottom { - @include gradient-style($color-accent); + @include gradient-style(var.$color-accent); bottom: -50%; left: -20%; diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue index a7a5993..964910e 100644 --- a/src/components/ActionBar.vue +++ b/src/components/ActionBar.vue @@ -62,12 +62,14 @@ const actions = computed(() => [ </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .action-menu { display: flex; align-items: center; margin-top: 5rem; padding: 0.5rem; - background-color: $color-gray; + background-color: var.$color-gray; border-radius: 2rem; .menu-item { @@ -77,7 +79,7 @@ const actions = computed(() => [ width: 2.5rem; height: 2.5rem; margin: 0 0.5rem; - background-color: lighten($color-gray, 10); + background-color: lighten(var.$color-gray, 10); border-radius: 50%; cursor: pointer; transition: opacity 0.2s; diff --git a/src/components/CodeModal.vue b/src/components/CodeModal.vue index 4c68770..930fa0b 100644 --- a/src/components/CodeModal.vue +++ b/src/components/CodeModal.vue @@ -86,6 +86,8 @@ onUnmounted(() => { </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .code-modal { position: fixed; bottom: 0; @@ -110,7 +112,7 @@ onUnmounted(() => { margin: 0 auto; padding: $code-header-height $code-box-side-padding-normal 2.5rem $code-box-side-padding-normal; - background-color: lighten($color-dark, 3); + background-color: lighten(var.$color-dark, 3); border-radius: 1rem; transition: width 0.2s; @@ -118,11 +120,11 @@ onUnmounted(() => { width: 75%; } - @media screen and (max-width: $screen-md) { + @media screen and (max-width: var.$screen-md) { width: 80%; } - @media screen and (max-width: $screen-sm) { + @media screen and (max-width: var.$screen-sm) { width: 90%; padding: $code-header-height $code-box-side-padding-small 2.5rem $code-box-side-padding-small; @@ -153,7 +155,7 @@ onUnmounted(() => { width: 2rem; height: 2rem; margin-left: auto; - background-color: lighten($color-dark, 8); + background-color: lighten(var.$color-dark, 8); border-radius: 50%; cursor: pointer; @@ -176,7 +178,7 @@ onUnmounted(() => { height: 20rem; height: 100%; padding: 1rem 0; - background: darken($color-dark, 1); + background: darken(var.$color-dark, 1); border-radius: 0.8rem; .code-scroll-wrapper { @@ -193,15 +195,15 @@ onUnmounted(() => { width: 5rem; height: 2rem; color: #fff; - background-color: $color-accent; + background-color: var.$color-accent; border-radius: 0.4rem; transform: translate(-50%, -45%); cursor: pointer; transition: color 0.15s, background-color 0.15s; &.copied { - color: $color-dark; - background-color: $color-secondary; + color: var.$color-dark; + background-color: var.$color-secondary; } } } @@ -220,6 +222,8 @@ onUnmounted(() => { </style> <style lang="scss"> +@use 'src/styles/var'; + .code-content { display: block; padding: 0 1.5rem; @@ -229,7 +233,7 @@ onUnmounted(() => { font-family: 'Ubuntu Mono', Fallback; line-height: 1.4; - @media screen and (max-width: $screen-sm) { + @media screen and (max-width: var.$screen-sm) { padding: 0 1rem; font-size: 1rem; } diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue index 3e9d809..35ffc31 100644 --- a/src/components/Configurator.vue +++ b/src/components/Configurator.vue @@ -165,15 +165,17 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .configurator-scroll { - width: $layout-sider-width; + width: var.$layout-sider-width; height: 100%; - background-color: $color-configurator; + background-color: var.$color-configurator; } .configurator { width: 100%; - color: $color-text; + color: var.$color-text; .wrapper-shape { display: flex; @@ -187,7 +189,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { display: inline-block; width: 1.5rem; height: 1.5rem; - background-color: $color-text; + background-color: var.$color-text; transition: background-color 0.2s; &.circle { @@ -199,7 +201,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { } &.active { - background-color: $color-accent; + background-color: var.$color-accent; } } } @@ -226,7 +228,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { margin: 0 auto; font-size: 16px; border-radius: 50%; - box-shadow: 0 0 0.05em 0.2em $color-configurator; + box-shadow: 0 0 0.05em 0.2em var.$color-configurator; &.transparent { background: #fff !important; @@ -265,7 +267,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { top: 50%; left: 50%; z-index: 1; - color: $color-configurator; + color: var.$color-configurator; font-size: 1.5rem; transform: translate(-50%, -50%) scale(0.5); opacity: 0; @@ -301,11 +303,11 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { transition: background-color 0.2s; &.selected.selected { - background-color: lighten($color-configurator, 6); + background-color: lighten(var.$color-configurator, 6); } &:hover { - background-color: darken($color-configurator, 3); + background-color: darken(var.$color-configurator, 3); } & > :deep(svg) { @@ -314,7 +316,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) { } & :deep(path) { - stroke: $color-stroke !important; + stroke: var.$color-stroke !important; } } } diff --git a/src/components/DownloadModal.vue b/src/components/DownloadModal.vue index 2524cc3..3a9589e 100644 --- a/src/components/DownloadModal.vue +++ b/src/components/DownloadModal.vue @@ -37,6 +37,8 @@ const { t } = useI18n() </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .download-modal-wrapper { position: fixed; bottom: 0; @@ -53,7 +55,7 @@ const { t } = useI18n() backdrop-filter: blur(0.3rem); @supports not (backdrop-filter: blur(0.3rem)) { - background-color: rgba($color-dark, 0.8); + background-color: rgba(var.$color-dark, 0.8); } } @@ -62,8 +64,8 @@ const { t } = useI18n() width: 50%; min-width: 310px; max-width: 500px; - background-color: darken($color-dark, 1); - border: 0.15rem solid rgba($color-accent, 0.8); + background-color: darken(var.$color-dark, 1); + border: 0.15rem solid rgba(var.$color-accent, 0.8); border-radius: 1rem; .modal-body { @@ -78,11 +80,11 @@ const { t } = useI18n() width: 60%; margin: 0 auto; - @media screen and (max-width: $screen-md) { + @media screen and (max-width: var.$screen-md) { width: 80%; } - @media screen and (max-width: $screen-sm) { + @media screen and (max-width: var.$screen-sm) { width: 90%; } @@ -97,7 +99,7 @@ const { t } = useI18n() max-width: 70%; margin: 0 auto; padding: 1.5rem 0; - color: $color-text; + color: var.$color-text; font-size: 0.85rem; text-align: center; cursor: default; @@ -113,9 +115,9 @@ const { t } = useI18n() margin: 0 1rem; margin-left: auto; padding: 0 1rem; - color: $color-text; + color: var.$color-text; font-weight: bold; - background: $color-gray; + background: var.$color-gray; border-radius: 0.2rem; border-radius: 0.6rem; cursor: pointer; @@ -123,7 +125,7 @@ const { t } = useI18n() user-select: none; &:hover { - color: lighten($color-text, 10); + color: lighten(var.$color-text, 10); transform: translateY(-0.3rem); } } diff --git a/src/layouts/Container.vue b/src/layouts/Container.vue index 96711d1..0362b2d 100644 --- a/src/layouts/Container.vue +++ b/src/layouts/Container.vue @@ -53,16 +53,18 @@ onUnmounted(() => { </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .container { height: 100%; - padding-right: $layout-sider-width; + padding-right: var.$layout-sider-width; transition: padding-right 0.2s; &.full { padding-right: 0; } - @media screen and (max-width: $screen-lg) { + @media screen and (max-width: var.$screen-lg) { padding-right: 0; } } diff --git a/src/layouts/Footer.vue b/src/layouts/Footer.vue index 9fa580e..04f5250 100644 --- a/src/layouts/Footer.vue +++ b/src/layouts/Footer.vue @@ -33,13 +33,15 @@ function switchLocale() { </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .footer { display: flex; align-items: center; justify-content: center; - height: $layout-footer-height; + height: var.$layout-footer-height; padding: 0.8rem 0; - color: rgba($color-text, 0.4); + color: rgba(var.$color-text, 0.4); font-weight: bold; font-size: 0.8rem; @@ -56,7 +58,7 @@ function switchLocale() { transition: color 0.2s; &:hover { - color: $color-text; + color: var.$color-text; } } } diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue index 6696be0..537f650 100644 --- a/src/layouts/Header.vue +++ b/src/layouts/Header.vue @@ -33,10 +33,12 @@ import { recordEvent } from '@/utils/ga' </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .header { display: flex; align-items: center; - height: $layout-header-height; + height: var.$layout-header-height; padding: 1rem 2rem; .site-title { @@ -45,7 +47,7 @@ import { recordEvent } from '@/utils/ga' font-size: 1.9rem; cursor: default; - @media screen and (max-width: $screen-sm) { + @media screen and (max-width: var.$screen-sm) { display: none; } } @@ -59,18 +61,18 @@ import { recordEvent } from '@/utils/ga' justify-content: center; width: 8rem; height: 2.5rem; - color: $color-text; + color: var.$color-text; font-weight: bold; font-size: 1.05rem; - background-color: $color-dark; + background-color: var.$color-dark; border-radius: 0.6rem; cursor: pointer; transition: box-shadow 0.2s, background-color 0.2s; user-select: none; &:hover { - background-color: lighten($color-dark, 2); - box-shadow: 0 0.2rem 1.5rem 0.2rem lighten($color-dark, 5); + background-color: lighten(var.$color-dark, 2); + box-shadow: 0 0.2rem 1.5rem 0.2rem lighten(var.$color-dark, 5); } .text { diff --git a/src/layouts/Sider.vue b/src/layouts/Sider.vue index b401d9b..9d59815 100644 --- a/src/layouts/Sider.vue +++ b/src/layouts/Sider.vue @@ -16,6 +16,8 @@ const { isCollapsed, openSider, closeSider } = useSider() </script> <style lang="scss" scoped> +@use 'src/styles/var'; + .sider { position: fixed; top: 0; @@ -45,7 +47,7 @@ const { isCollapsed, openSider, closeSider } = useSider() justify-content: center; width: 1.2rem; height: 4rem; - background-color: lighten($color-configurator, 2); + background-color: lighten(var.$color-configurator, 2); border-radius: 0.4rem 0 0 0.4rem; transform: translate(-100%, -50%); cursor: pointer; @@ -53,7 +55,7 @@ const { isCollapsed, openSider, closeSider } = useSider() &:hover { width: 1.5rem; - background-color: lighten($color-configurator, 5); + background-color: lighten(var.$color-configurator, 5); } } } diff --git a/src/styles/global.scss b/src/styles/global.scss index 6f68113..1a4889a 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,4 +1,7 @@ +@use 'src/styles/var'; +/* stylelint-disable-next-line no-invalid-position-at-import-rule */ @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); +/* stylelint-disable-next-line no-invalid-position-at-import-rule */ @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap'); @font-face { @@ -25,7 +28,7 @@ img { } ::selection { - background: rgba($color-text, 0.15); + background: rgba(var.$color-text, 0.15); } #app { diff --git a/src/styles/variables.scss b/src/styles/var.scss similarity index 100% rename from src/styles/variables.scss rename to src/styles/var.scss diff --git a/vite.config.ts b/vite.config.ts index b6a6424..5f1e49a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -34,12 +34,4 @@ export default defineConfig(({ mode }) => ({ __VUE_I18N_LEGACY_API__: false, __INTLIFY_PROD_DEVTOOLS__: false, }, - - css: { - preprocessorOptions: { - scss: { - additionalData: `@import "./src/styles/variables.scss";`, - }, - }, - }, })) -- GitLab