当前位置: 首页 > news >正文

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>

相关文章:

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

:root—— 原生CSS 自定义属性&#xff08;变量&#xff09; 在 SCSS 文件中定义 CSS 自定义属性。然后通过 JavaScript 读取这些属性。 // variables.scss :root { --login-bg-color: #293146;--left-menu-max-width: 200px;--left-menu-min-width: 64px;--left-menu-bg-…...

WPF+MVVM案例实战与特效(二十八)- 自定义WPF ComboBox样式:打造个性化下拉菜单

文章目录 1. 引言案例效果3. ComboBox 基础4. 自定义 ComboBox 样式4.1 定义 ComboBox 样式4.2 定义 ComboBoxItem 样式4.3 定义 ToggleButton 样式4.4 定义 Popup 样式5. 示例代码6. 结论1. 引言 在WPF应用程序中,ComboBox控件是一个常用的输入控件,用于从多个选项中选择一…...

速盾:怎么使用cdn加速?

CDN&#xff08;Content Delivery Network&#xff09;即内容分发网络&#xff0c;是一种通过在网络各处部署节点来缓存和传输网络内容的技术。通过使用CDN加速&#xff0c;可以提高网站的访问速度、减轻服务器负载、提供更好的用户体验。 使用CDN加速的步骤如下&#xff1a; …...

C++ 优先算法 —— 三数之和(双指针)

目录 题目&#xff1a;三数之和 1. 题目解析 2. 算法原理 ①. 暴力枚举 ②. 双指针算法 不漏的处理&#xff1a; 去重处理&#xff1a; 固定一个数 a 的优化&#xff1a; 3. 代码实现 Ⅰ. 暴力枚举&#xff08;会超时 O&#xff08;N&#xff09;&#xff09; Ⅱ.…...

YOLOv7-0.1部分代码阅读笔记-yolo.py

yolo.py models\yolo.py 目录 yolo.py 1.所需的库和模块 2.class Detect(nn.Module): 3.class IDetect(nn.Module): 4.class IAuxDetect(nn.Module): 5.class IBin(nn.Module): 6.class Model(nn.Module): 7.def parse_model(d, ch): 8.if __name__ __main__…...

【缓存与加速技术实践】Web缓存代理与CDN内容分发网络

文章目录 Web缓存代理Nginx配置缓存代理详细说明 CDN内容分发网络CDN的作用CDN的工作原理CDN内容的获取方式解决缓存集中过期的问题 Web缓存代理 作用&#xff1a; 缓存之前访问过的静态网页资源&#xff0c;以便在再次访问时能够直接从缓存代理服务器获取&#xff0c;减少源…...

MySQL的约束和三大范式

一.约束 什么是约束&#xff0c;为什么要用到约束&#xff1f; 约束就是用于创建表时&#xff0c;给对应的字段添加对应的约束 约束的作用就是当我们用insert into时&#xff0c;如果传入的数据有问题&#xff0c;不符合创建表时我们定的规定&#xff0c;这时MySQL就会自动帮…...

Unity网络通信(part7.分包和黏包)

目录 前言 概念 解决方案 具体代码 总结 分包黏包概念 分包 黏包 解决方案概述 前言 在探讨Unity网络通信的深入内容时&#xff0c;分包和黏包问题无疑是其中的关键环节。以下是对Unity网络通信中分包和黏包问题前言部分的详细解读。 概念 在网络通信中&#xff0c;…...

练习题 - DRF 3.x Overviewses 框架概述

Django REST Framework (DRF) 是一个强大的工具,用于构建 Web APIs。作为 Django 框架的扩展,DRF 提供了丰富的功能和简洁的 API,使得开发 RESTful Web 服务变得更加轻松。对于想要在 Django 环境中实现快速且灵活的 API 开发的开发者来说,DRF 是一个非常有吸引力的选择。学…...

Linux 经典面试八股文

快速鉴别十个题 1&#xff0c;你如何描述Linux文件系统的结构&#xff1f; 答案应包括对/, /etc, /var, /home, /bin, /lib, /usr, 和 /tmp等常见目录的功能和用途的描述。 2&#xff0c;在Linux中如何查看和终止正在运行的进程&#xff1f; 期望的答案应涵盖ps, top, htop, …...

Filter和Listener

一、Filter过滤器 1 概念 可以实现拦截功能&#xff0c;对于指定资源的限定进行拦截&#xff0c;替换&#xff0c;同时还可以提高程序的性能。在Web开发时&#xff0c;不同的Web资源中的过滤操作可以放在同一个Filter中完成&#xff0c;这样可以不用多次编写重复代码&#xf…...

Go 项目中实现类似 Java Shiro 的权限控制中间件?

序言&#xff1a; 要在 Go 项目中实现类似 Java Shiro 的权限控制中间件&#xff0c;我们可以分为几个步骤来实现用户的菜单访问权限和操作权限控制。以下是一个基本的实现框架步骤&#xff1a; 目录 一、数据库设计 二、中间件实现 三、使用中间件 四、用户权限管理 五…...

【Javascript】-一些原生的网页设计案例

JavaScript 网页设计案例 1. 动态时钟 功能描述&#xff1a;在网页上显示一个动态更新的时钟&#xff0c;包括小时、分钟和秒。实现思路&#xff1a; 使用 setInterval 函数每秒更新时间。获取当前时间并更新页面上的文本。 代码示例&#xff1a;<div id"clock"…...

SpringBoot开发——Spring Boot 3种定时任务方式

文章目录 一、什么是定时任务二、代码示例1、 @Scheduled 定时任务2、多线程定时任务3、基于接口(SchedulingConfigurer)实现动态更改定时任务3.1 数据库中存储cron信息3.2 pom.xml文件中增加mysql依赖3.3 application.yaml文件中增加mysql数据库配置:3.4 创建定时器3.5 启动…...

Flutter鸿蒙next 实现长按录音按钮及动画特效

在 Flutter 中实现长按录音按钮并且添加动画特效&#xff0c;是一个有趣且实用的功能。本文将通过实现一个具有动画效果的长按录音按钮&#xff0c;带领你一步步了解如何使用 Flutter 完成这个任务&#xff0c;并解释每一部分的实现。 一、功能需求 我们需要一个按钮&#xf…...

【计网】实现reactor反应堆模型 --- 框架搭建

没有一颗星&#xff0c; 会因为追求梦想而受伤&#xff0c; 当你真心渴望某样东西时&#xff0c; 整个宇宙都会来帮忙。 --- 保罗・戈埃罗 《牧羊少年奇幻之旅》--- 实现Reactor反应堆模型 1 前言2 框架搭建3 准备工作4 Reactor类的设计5 Connection连接接口6 回调方法 1 …...

力扣中等难度热题——长度为K的子数组的能量值

目录 题目链接&#xff1a;3255. 长度为 K 的子数组的能量值 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示&#xff1a; 解法一&#xff1a;通过连续上升的长度判断 Java写法&#xff1a; C写法&#xff1a; 相比与Java写法的差别 运行时间 时间复杂…...

JSON格式

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人和机器阅读和解析。它基于JavaScript的对象表示法&#xff0c;但被广泛用于多种编程语言。 JSON中的数据类型 字符串&#xff08;String&#xff09;&#xff1a;用双引…...

O-RAN前传Spilt Option 7-2x

Spilt Option 7-2x 下行比特处理上行比特处理相关文章&#xff1a; Open Fronthaul wrt ORAN 联盟被称为下层拆分(LLS)&#xff0c;其目标是提高电信市场的灵活性和竞争力。下层拆分是指无线电单元(RU) 和分布式单元(DU) 之间的拆分。 O-RAN前传接口可以在 eCPRI 上传输。eCPR…...

【GeoJSON在线编辑平台】(2)吸附+删除+挖孔+扩展

前言 在上一篇的基础上继续开发&#xff0c;补充上吸附功能、删除矢量、挖孔功能。 实现 1. 吸附 参考官方案例&#xff1a;Snap Interaction 2. 删除 通过 removeFeature 直接移除选中的要素。 3. 挖孔 首先是引入 Turf.js &#xff0c;然后通过 mask 方法来实现挖孔的…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...