CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量

: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>
相关推荐
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
Heo1 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
前端小巷子2 小时前
深入 npm 模块安装机制
前端·javascript·面试
深职第一突破口喜羊羊3 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking3 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵3 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆4 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七4 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript