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

:root—— 原生CSS 自定义属性(变量)

在 SCSS 文件中定义 CSS 自定义属性。然后通过 JavaScript 读取这些属性。

// 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() 函数来使用这些变量:

.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 中通过类名来引用样式。

$namespace: 'myNamespace';  
$elNamespace: 'elementNamespace';  .#{$namespace}__header {  color: blue;  
}  .#{$elNamespace}__button {  background-color: green;  
}

在JavaScript中使用SCSS变量

global.module.scss

// 命名空间
$namespace: v;
// el命名空间
$elNamespace: el;// 导出变量
:export {namespace: $namespace;elNamespace: $elNamespace;
}

:export: 这是一个特殊指令,用于将SASS变量导出到JavaScript中。通过这种方式,你可以在JavaScript代码中访问这些变量。

namespace: 这是导出的变量名,其值为 $namespace 的值,即 v。

elNamespace: 这是另一个导出的变量名,其值为 $elNamespace 的值,即 el。

项目中的使用

useDesign.ts

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

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

复现LLM:带你从零认识语言模型

前言 本文会以Qwen2-0.5B模型为例&#xff0c;从使用者的角度&#xff0c;从零开始一步一步的探索语言模型的推理过程。主要内容如下&#xff1a; 从使用的角度来接触模型本地运行的方式来认识模型以文本生成过程来理解模型以内部窥探的方式来解剖模型 1. 模型前台使用 1.1…

【NLP自然语言处理】深入探索Self-Attention:自注意力机制详解

目录 &#x1f354; Self-attention的特点 &#x1f354; Self-attention中的归一化概述 &#x1f354; softmax的梯度变化 3.1 softmax函数的输入分布是如何影响输出的 3.2 softmax函数在反向传播的过程中是如何梯度求导的 3.3 softmax函数出现梯度消失现象的原因 &…

Matlab 火焰识别技术

课题介绍 森林承担着为人类提供氧气以及回收二氧化碳等废弃气体的作用&#xff0c;森林保护显得尤其重要。但是每年由于火灾引起的事故不计其数&#xff0c;造成重大的损失。如果有一款监测软件&#xff0c;从硬件处获得的图像中监测是否有火焰&#xff0c;从而报警&#xff0…

Linux多线程(个人笔记)

Linux多线程 1.Linux线程概念1.1线程的优点1.2线程的缺点 2.Linux线程VS进程3.Linux线程控制3.1创建线程3.2线程tid及进程地址空间布局3.3线程终止3.4线程等待 4.分离线程5.线程互斥5.1互斥锁mutex5.2互斥锁接口5.3互斥锁实现原理5.4可重入VS线程安全 6.线程同步6.1条件变量6.2…

深度学习:自监督学习(Self-supervised Learning, SSL)详解

自监督学习&#xff08;Self-supervised Learning, SSL&#xff09;详解 自监督学习&#xff08;Self-supervised Learning, SSL&#xff09;是一种强大的机器学习范式&#xff0c;它能够利用未标注数据来提取有效的特征&#xff0c;进而用于各种下游任务。在详细探讨自监督学…

【EdgeBox-8120AI-TX2】Ubuntu18.04 + ROS_ Melodic + HP60C上手体验

简介&#xff1a;介绍安思疆 HP60C 深度相机在8120AI-TX2控制器上&#xff0c;TX2核心模块环境&#xff08;Ubuntu18.04&#xff09;下测试ROS驱动&#xff0c;打开摄像头图像和查看深度图和点云图&#xff0c;本文的前提条件是你的TX2里已经安装了ROS版本&#xff1a;Melodic。…

自动驾驶中,2d图像目标检测(分割),融合激光雷达点云信息

思路索引 1、通过yolov8预测出image中的2d目标框和mask&#xff1b;2、过滤出位于图像范围内的激光雷达点&#xff1b;3、基于单个深度相机估算出2D框在ego坐标系下的的W和H;4、融合2D图像框和3D激光点&#xff08;使用mask还是使用box &#xff09;5、融合之后的激光点进行聚类…

DataWind将字符串数组拆出多行的方法

摘要&#xff1a; 可视化建模中先将字符串split为array再用explode(array)即可 可视化建模 进入“可视化建模”页面 1.1 新建任务 如果团队内没有可视化建模任务。请点击“新建任务”&#xff0c;输入名称并确定。 1.2 建立数据连接 在左边栏中选择“数据连接”&#xff0c…

【大数据学习 | kafka】简述kafka的消费者consumer

1. 消费者的结构 能够在kafka中拉取数据进行消费的组件或者程序都叫做消费者。 这里面要涉及到一个动作叫做拉取。 首先我们要知道kafka这个消息队列主要的功能就是起到缓冲的作用&#xff0c;比如flume采集数据然后交给spark或者flink进行计算分析&#xff0c;但是flume采用的…

CCF ChinaOSC |「开源科学计算与系统建模openSCS专题分论坛」11月9日与您相约深圳

2024年11月9日至10日&#xff0c;以“湾区聚力 开源启智”为主题的2024年中国计算机学会中国开源大会&#xff08;CCF ChinaOSC&#xff09;将在深圳召开。大会将汇聚国内外学术界、顶尖科技企业、科研机构及开源社区的精英力量&#xff0c;共同探索人工智能技术和人类智慧的无…

人工智能——小白学习指南

知孤云出岫 目录 1. **智能评测系统**2. **个性化学习路径推荐**3. **虚拟学习助手**4. **学习行为分析**5. **数据驱动的教学决策**6. **自动化课程推荐**7. **数据隐私与安全保护** 人工智能知识点的总结和学习路线&#xff0c;以数据表格形式呈现&#xff0c;并附带在教育行…

【LeetCode】【算法】215. 数组中的第K个最大元素

LeetCode 215. 数组中的第K个最大元素 题目描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第k个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第k个最大的元素&#xff0c;而不是第k个不同的元素。 你必须设计并实现时间复杂度为O(n)的算法解决此问题…

现代Web开发:React Hooks深入解析

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 现代Web开发&#xff1a;React Hooks深入解析 现代Web开发&#xff1a;React Hooks深入解析 现代Web开发&#xff1a;React Hook…

RTC精度及校准

RTC精度偏差&#xff1a; RTC的基准时间和精度与石英晶体的频率相关&#xff0c;晶体的谐振频率取决于温度&#xff0c;因此RTC性能与温度相关&#xff0c;晶体的频率偏差是晶体正常频率的温度反转函数。 一、硬件方面&#xff1a; 1.使用高精度振荡器的RTC模块&#xff1b; …

MongoDB 基础与应用

一、引言 在当今的数据驱动时代&#xff0c;数据库的选择对于应用程序的性能和可扩展性至关重要。MongoDB 作为一种流行的非关系型数据库&#xff0c;以其灵活的数据模型、强大的可扩展性和高可用性&#xff0c;受到了广泛的关注和应用。对于 Javaer来说&#xff0c;了解 Mongo…

了解bootstrap改造asp.net core MVC的样式模板

我们都知道&#xff0c;在使用默认的asp.net core MVC模板建立项目的时候&#xff0c;里面的样式是已经事先被写好了的。一般来说都在css目录下的site.css和bootstrap.css及下面的bootstrap.min.css中。我们打开bootstrap这些样式文件&#xff0c;里面有大量的样式类的定义&…

流类库与输入输出

来源&#xff1a;《C语言程序设计》 像C语言一样&#xff0c;C语言也没有输入输出语句。 但C标准库中有一个面向对象的输入输出软件包&#xff0c;即I/O流类库。 流是I/O流类的中心概念。 ------ I/O流类库是C语言中I/O函数在面向对象的程序设计方法中的一个替换产品。 -…

cocos creator 3.8.3物理组件分组的坑

坑&#xff0c;坑的不行的大坑 group用的二进制的左移获取十进制的数值 目前是这样判断的&#xff0c;也不知道对不对&#xff0c;什么get、set Group没找到

hhdb数据库介绍(9-4)

访问安全 权限体系 计算节点有两类用户&#xff0c;一类是计算节点数据库用户&#xff0c;用于操作数据&#xff0c;执行SELECT&#xff0c;UPDATE&#xff0c;DELETE&#xff0c;INSERT等SQL语句。另一类是关系集群数据库可视化管理平台用户&#xff0c;用于管理配置信息。此…

基于MFC实现的赛车游戏

一、问题描述 游戏背景为一环形车道图&#xff0c;选择菜单选项“开始游戏”则可开始游戏。游戏的任务是使用键盘上的方向键操纵赛道上的蓝色赛车追赶红色赛车&#xff0c;红色赛车沿车道顺时针行驶&#xff0c;出发点和终点均位于车道左上方。任一赛车先达到终点则比赛结束。…