:root------ 原生CSS 自定义属性(变量)
在 SCSS 文件中定义 CSS 自定义属性。然后通过 JavaScript 读取这些属性。
css
// variables.scss
:root {
--login-bg-color: #293146;
--left-menu-max-width: 200px;
--left-menu-min-width: 64px;
--left-menu-bg-color: #001529;
--left-menu-bg-light-color: #0f2438;
--left-menu-bg-active-color: var(--el-color-primary);
}
使用示例
在 CSS 中,您可以通过 var() 函数来使用这些变量:
css
.login {
background-color: var(--login-bg-color);
}
.left-menu {
max-width: var(--left-menu-max-width);
min-width: var(--left-menu-min-width);
background-color: var(--left-menu-bg-color);
}
.left-menu-item.active {
background-color: var(--left-menu-bg-active-color);
}
在 SCSS 中使用变量
生成具体的类名,然后在 JavaScript 中通过类名来引用样式。
css
$namespace: 'myNamespace';
$elNamespace: 'elementNamespace';
.#{$namespace}__header {
color: blue;
}
.#{$elNamespace}__button {
background-color: green;
}
在JavaScript中使用SCSS变量
global.module.scss
css
// 命名空间
$namespace: v;
// el命名空间
$elNamespace: el;
// 导出变量
:export {
namespace: $namespace;
elNamespace: $elNamespace;
}
:export: 这是一个特殊指令,用于将SASS变量导出到JavaScript中。通过这种方式,你可以在JavaScript代码中访问这些变量。
namespace: 这是导出的变量名,其值为 $namespace 的值,即 v。
elNamespace: 这是另一个导出的变量名,其值为 $elNamespace 的值,即 el。
项目中的使用
useDesign.ts
javascript
import variables from '@/styles/global.module.scss'
export const useDesign = () => {
const scssVariables = variables
/**
* @param scope 类名
* @returns 返回空间名-类名
*/
const getPrefixCls = (scope: string) => {
return `${scssVariables.namespace}-${scope}`
}
return {
variables: scssVariables,
getPrefixCls
}
}
使用useDesign.ts
Backtop.vue
javascript
<script lang="ts" setup>
import { ElBacktop } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
defineOptions({ name: 'BackTop' })
const { getPrefixCls, variables } = useDesign()
const prefixCls = getPrefixCls('backtop')
</script>
<template>
<ElBacktop
:class="`${prefixCls}-backtop`"
:target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
/>
</template>