CSS变量用法及实践

目录

一、基本用法

1.1、定义变量

1.2、使用变量

1.3 、修改变量的值

二、命名规范

2.1、使用有意义的名称

2.2、使用命名空间

三、变量值类型 

3.1、如果变量值是一个字符串，可以与其他字符串拼接，例如：

3.2、 如果变量值是数值，则不能与数值单位直接连用，例如：

3.3、如果变量值带有单位，就不能写成字符串，例如：

四、如何理解理解 :root 和 var() 

4.1、:root 伪类：

4.2、var() 函数： 

4.2.1、案例 1在这个案例中，我们定义了两个变量 --primary-color 和 --font-size，并将其应用于 .element 元素的颜色和字体大小。当鼠标悬停在 .element 元素上时，--primary-color 变量的值将变为绿色，--font-size 变量的值将变为 26px。

4.2.2 、案例 2

五、变量作用域

5.1、全局作用域

5.2、 局部作用域

 六、在vue自定义组件中的使用

一、基本用法

1.1、定义变量

变量的定义通常放在选择器的规则集内，或者在根元素（:root）中定义，以便全局使用。例如：

:root {--primary-color: #ff0000;--font-size: 16px;
}

1.2、使用变量

使用变量时，需要使用 var() 函数将变量包裹起来。变量可以在任何可以使用 CSS 属性值的地方使用，例如颜色、尺寸、边距等。例如：

.element {color: var(--primary-color);font-size: var(--font-size);
}

1.3 、修改变量的值

变量的值可以在 CSS 中动态修改，以实现样式的变化。可以通过JavaScript或使用伪类（:hover、:focus等）来修改变量的值。例如：

.element:hover {--primary-color: #00ff00;
}

或者使用 JavaScript 来修改变量的值：

document.documentElement.style.setProperty('--primary-color', '#00ff00');

二、命名规范


当我们在 CSS 中使用变量时，为了避免与现有的 CSS 属性冲突，我们可以使用自定义的 CSS 变量，并为它们选择适当的命名规范。以两个横线（--）开头的属性被视为 CSS 变量。

以下是一些常见的 CSS 变量命名规范：

2.1、使用有意义的名称

        为了增加代码的可读性和可维护性，我们应该选择具有描述性的名称来命名 CSS 变量。这样可以使其他开发人员更容易理解变量的用途和含义；
使用小写字母和连字符：CSS 变量的名称应该使用小写字母，并使用连字符（-）作为单词之间的分隔符。例如，--primary-color；


2.2、使用命名空间

        为了避免与其他变量冲突，可以使用命名空间来对变量进行分组。例如，--button-primary-color，其中 button 是命名空间；
避免使用缩写和简写：尽量避免使用缩写和简写的变量名称，因为这可能会导致代码的可读性降低。选择具有描述性的名称，以便其他开发人员能够轻松理解变量的含义；
使用一致的命名约定：在整个项目中保持一致的命名约定是很重要的。选择一种命名风格，并在整个项目中坚持使用它，这样可以提高代码的一致性和可读性。
总之，CSS 变量的命名规范应该注重可读性、可维护性和一致性。通过选择有意义的名称、使用小写字母和连字符、使用命名空间以及避免缩写和简写，我们可以更好地组织和管理 CSS 变量。

三、变量值类型 

在 CSS 中，CSS 变量的值可以是各种不同的类型。不同的类型在使用上也会有细微的差别。

3.1、如果变量值是一个字符串，可以与其他字符串拼接，例如：

<!DOCTYPE html>
<html><style>:root {--primary-content: 'hello';}.box:after {content: '标题 : ' var(--primary-content)}
</style><body><div class="box"></div>
</body></html>

3.2、 如果变量值是数值，则不能与数值单位直接连用，例如：

在下面的代码中，我们在 box2 盒子使用 calc() 函数来执行数学计算，将变量 --primary-num 的值乘以 1 像素（1px）。这样，就可以将数值与单位进行结合，以实现正确的样式效果。通过这种方式，我们可以将数值与单位进行拼接，确保样式的正确性。而且 calc() 函数可以执行更复杂的数学计算，例如加法、减法、乘法和除法等。

<!DOCTYPE html>
<html><style>:root {--primary-num: 40;}.box1 {background: cadetblue;padding-top: var(--primary-num)px;}.box2 {background: chocolate;padding-top: calc(var(--primary-num) * 1px);}
</style><body><div class="box1">内容1</div><div class="box2">内容2</div>
</body></html>

3.3、如果变量值带有单位，就不能写成字符串，例如：

在下面的代码中，我们在 box1 盒子将带有单位的变量值定义为字符串。这是无效的，因为 CSS 属性期望的是数值单位，而不是字符串。这样的定义会导致样式无效或产生错误。因此，当变量值带有单位时，应该将其定义为数值，而不是字符串。这样可以确保变量在应用于 CSS 属性时能够正确地与单位进行结合。

<!DOCTYPE html>
<html><style>:root {--border-radius-box1: '20px';--border-radius-box2: 20px;}.box1 {background: chocolate;border-radius: var(--border-radius-box1);}.box2 {background: cornflowerblue;border-radius: var(--border-radius-box2);}
</style><body><div class="box1">内容1</div><div class="box2">内容2</div>
</body></html>
  • 实现效果

四、如何理解理解 :root 和 var() 

4.1、:root 伪类：

  • :root 伪类选择器匹配文档树的根元素，通常是 <html> 元素；
  • 在 :root 伪类中定义的 CSS 变量可以在整个文档中全局使用；
  • 通过在 :root 伪类中定义变量，我们可以为整个文档设置全局的 CSS 属性值；
  • 例如，我们可以使用 :root 伪类定义全局的颜色、字体大小、断点值等。

4.2、var() 函数： 

  • var() 函数用于引用和使用 CSS 变量的值；
  • 它接受一个参数，即引用的 CSS 变量的名称；
  • var() 函数可以在任何 CSS 属性的值中使用，包括字体大小、颜色、边距等；
  • 通过使用 var() 函数，我们可以根据需要在不同的元素和选择器中使用相同的 CSS 变量值，实现统一的样式管理；
  • 例如，我们可以使用 var(--primary-color) 来引用全局定义的 --primary-color 变量。

CSS 变量的基本用法就是这样。通过定义、使用和修改变量的值，可以实现样式的重用、动态变化和全局控制。这使得 CSS 开发更加灵活和可维护。下面为大家提供三个案例，涵盖了定义变量、使用变量和修改变量的值的示例的完整代码。

4.2.1、案例 1
在这个案例中，我们定义了两个变量 --primary-color 和 --font-size，并将其应用于 .element 元素的颜色和字体大小。当鼠标悬停在 .element 元素上时，--primary-color 变量的值将变为绿色，--font-size 变量的值将变为 26px。
<!DOCTYPE html>
<html><head><style>:root {--primary-color: #f88604;--font-size: 22px;}.element {color: var(--primary-color);font-size: var(--font-size);}.element:hover {--primary-color: rgb(0, 104, 202);}</style>
</head><body><div class="element">Hello, CSS Variables!</div>
</body></html>
  • 实现效果

4.2.2 、案例 2

在这个案例中，我们定义了一个变量 --primary-color，并将其应用于 .element 元素的颜色。通过 JavaScript 中的 changeColor 函数，我们可以通过点击按钮来修改 --primary-color 变量的值，从而改变 .element 元素的颜色。

<!DOCTYPE html>
<html><head><style>:root {--primary-color: orange;}.element {color: var(--primary-color);}</style><script>function changeColor() {document.documentElement.style.setProperty('--primary-color', 'blue');// document.documentElement.style.setProperty('root变量', '更改的值')}</script>
</head><body><div class="element">Click the button to change color</div><button onclick="changeColor()">点击改变颜色</button>
</body></html>

 

五、变量作用域


CSS 变量的作用域是定义它们的选择器的范围。在选择器内定义的变量只能在该选择器内部使用，而在全局作用域内定义的变量则可以在整个文档中使用。

5.1、全局作用域

  • 在 :root 伪类中定义的 CSS 变量具有全局作用域；
  • :root 伪类选择器匹配文档树的根元素，通常是 <html> 元素；
  • 在 :root 伪类中定义的变量可以在整个文档中全局使用。
<!DOCTYPE html>
<html><head><style>:root {--bg-color: rgb(88, 88, 186);--color: #33ca63;}div {background-color: var(--bg-color);color: var(--color);}span {background-color: var(--bg-color);color: var(--color);}</style>
</head><body><div><p>我在div内部</p></div><span>我在div外部</span>
</body></html>

5.2、 局部作用域

  • 在选择器内部或元素内部定义的 CSS 变量具有局部作用域；
  • 这些变量只能在定义它们的选择器或元素内部使用；
  • 局部作用域的变量会覆盖全局作用域中同名的变量。
<!DOCTYPE html>
<html><head><style>div {--bg-color: rgb(88, 88, 186);--color: #33ca63;}p {background-color: var(--bg-color);color: var(--color);}span {background-color: var(--bg-color);color: var(--color);}</style>
</head><body><div><p>我在div内部</p></div><span>我在div外部</span>
</body></html>

 六、在vue自定义组件中的使用

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

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

相关文章

WEB开发： 丢掉包袱，拥抱ASP.NET CORE！

WEB开发： 丢掉包袱，拥抱ASP.NET CORE！

今天的 Web 开发可以说进入了一个全新的时代&#xff0c;前后端分离、云原生、微服务等等一系列现代技术架构应运而生。在这个背景下&#xff0c;作为开发者&#xff0c;你一定希望找到一个高效、灵活、易于扩展且具有良好性能的框架。那么&#xff0c;ASP.NET Core 显然是一个…
阅读更多...
【汇编语言】标志寄存器（一） —— 标志寄存器中的标志位：ZF、PF、SF、CF、OF 一网打尽

【汇编语言】标志寄存器（一） —— 标志寄存器中的标志位：ZF、PF、SF、CF、OF 一网打尽

前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构、操作系统、微机原理&#xff09;的重要基础。但仅仅从课程的角度出发就太片面了&#xff0c;其实学习汇编语言可以深入理解计算机底层工作原理&#xff0c;提升代码效率&#xff0c;尤其在嵌入式系统和性能优…
阅读更多...
纯Go语言开发人脸检测、瞳孔/眼睛定位与面部特征检测插件-助力GoFly快速开发框架

纯Go语言开发人脸检测、瞳孔/眼睛定位与面部特征检测插件-助力GoFly快速开发框架

前言​ 开发纯go插件的原因是因为目前 Go 生态系统中几乎所有现有的人脸检测解决方案都是纯粹绑定到一些 C/C 库&#xff0c;如 ​​OpenCV​​ 或 ​​​dlib​​​&#xff0c;但通过 ​​​cgo​​​ 调用 C 程序会引入巨大的延迟&#xff0c;并在性能方面产生显著的权衡。…
阅读更多...
2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

三要素之间关系&#xff1a; 有了虚拟场景Scene&#xff0c;相机录像Camera&#xff0c;在相机小屏幕上看到的Renderer Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上 首先先描述下Scene&#xff1a; 这个场景为三要素之一&#xff0c;一切需要展示的东西都需…
阅读更多...
电子电气架构 --- 车载网关GW连接外部IP Tester

电子电气架构 --- 车载网关GW连接外部IP Tester

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…
阅读更多...
防火墙iptables

防火墙iptables

一、概述 1.1相关概念 入侵监测系统 在互联网访问的过程中&#xff0c;不阻断任何网络访问&#xff0c;也不会定位网络的威胁&#xff0c;提供告警和事后的监督&#xff0c;类似于监控。 入侵防御系统 透明工作模式&#xff0c;在判定为攻击行为或者是病毒威胁时&#xff0c…
阅读更多...
Android Camera2采集并编码为H.264

Android Camera2采集并编码为H.264

前言 本篇博文主要讲述的是基于Android原生MediaCodec通过Camera2 API进行图像数据采集并编码为H.264的实现过程&#xff0c;如果对此感兴趣的不妨驻足观看&#xff0c;也欢迎大家大家对本文中描述不当或者不正确的地方进行指正。如果对于Camera2预览还不熟悉的可以观看博主上…
阅读更多...
【ROS2】Ubuntu22.04安装ROS humble

【ROS2】Ubuntu22.04安装ROS humble

一. ROS简介 1.1 什么是ROS ROS 是一个适用于机器人的开源的元操作系统。它提供了操作系统应有的服务&#xff0c;包括硬件抽象&#xff0c;底层设备控制&#xff0c;常用函数的实现&#xff0c;进程间消息传递&#xff0c;以及包管理。ROS的核心思想就是将机器人的软件功能做…
阅读更多...
Redis开发05：使用stackexchange.redis库对redis进行增删改查

Redis开发05：使用stackexchange.redis库对redis进行增删改查

一、安装第三方库 二、官网 StackExchange.Redis |通用型 redis 客户端 三、连接示例 private static string redisConnectionString "localhost:6379,passwordyourpassword,defaultDatabase0,allowAdmintrue,asyncTimeout10000";private static string redisConn…
阅读更多...
【golang】单元测试，以及出现undefined时的解决方案

【golang】单元测试，以及出现undefined时的解决方案

单元测试 要对某一方法进行测试时&#xff0c;例如如下这一简单减法函数&#xff0c;选中函数名后右键->转到->测试 1&#xff09;Empty test file 就是一个空文件&#xff0c;我们可以自己写测试的逻辑 但是直接点绿色箭头运行会出问题&#xff1a; 找不到包。我们要在…
阅读更多...
火语言RPA流程组件介绍--键盘按键

火语言RPA流程组件介绍--键盘按键

&#x1f6a9;【组件功能】&#xff1a;模拟键盘按键 配置预览 配置说明 按键 点击后,在弹出的软键盘上选择需要的按键 执行后等待时间(ms) 默认值300,执行该组件后等待300毫秒后执行下一个组件. 输入输出 输入类型 万能对象类型(System.Object)输出类型 万能对象类型…
阅读更多...
护航开源大赛，赋能数字未来

护航开源大赛，赋能数字未来

近日&#xff0c;在2024世界互联网大会乌镇峰会互联网公益慈善论坛上&#xff0c;2024中国互联网发展创新与投资大赛&#xff08;开源&#xff09;圆满落幕。作为大赛的技术支持单位&#xff0c;棱镜七彩支撑了大赛的分析评估&#xff0c;定量化、科学化、体系化、专业化的对参…
阅读更多...
Profinet转EtherNet/IP网关是如何解决西门子S7-1500PLC与AB PLC的通讯问题的

Profinet转EtherNet/IP网关是如何解决西门子S7-1500PLC与AB PLC的通讯问题的

一、 案例背景 在一个工业现场&#xff0c;一端是AB的PLC&#xff0c;IP地址192.168.1.20;另一端西门子是S7-1500系列&#xff0c;IP地址192.168.2.248。AB的PLC内有 B3、N7、F8 三个寄存器文件涉及到通讯&#xff0c;分别对应西门子PLC的M、DB1、DB2三个存储区域。通过捷米特…
阅读更多...
GateWay使用手册

GateWay使用手册

好的&#xff0c;下面是优化后的版本。为了提高可读性和规范性&#xff0c;我对内容进行了结构化、简化了部分代码&#xff0c;同时增加了注释说明&#xff0c;便于理解。 1. 引入依赖 在 pom.xml 中添加以下依赖&#xff1a; <dependencies><!-- Spring Cloud Gate…
阅读更多...
SpringBoot+Flowable快速实现工流_动态选择审批人员

SpringBoot+Flowable快速实现工流_动态选择审批人员

前言 OA系统中的工作流不仅是企业日常运营的重要组成部分&#xff0c;也是实现企业数字化转型、提高工作效率和执行力的重要工具。 在国内大部分的工作流系统使用Activiti框架实现。 其实flowable也可以轻松实现工作流业务。在线体验JeecgFlow flowable简介 Flowable是一个使用…
阅读更多...
【ONE·基础算法 || 动态规划（三）】

【ONE·基础算法 || 动态规划（三）】

总言 主要内容&#xff1a;编程题举例&#xff0c;熟悉理解动态规划类题型&#xff08;回文串问题、两个数组的 dp问题&#xff09;。                文章目录 总言7、回文串问题7.1、 回文子串&#xff08;medium&#xff09;7.1.1、题解 7.2、 最长回文子串&#…
阅读更多...
Python 3 教程第33篇（MySQL - mysql-connector 驱动）

Python 3 教程第33篇（MySQL - mysql-connector 驱动）

Python MySQL - mysql-connector 驱动 MySQL 是最流行的关系型数据库管理系统&#xff0c;如果你不熟悉 MySQL&#xff0c;可以阅读我们的 MySQL 教程。 本章节我们为大家介绍使用 mysql-connector 来连接使用 MySQL&#xff0c; mysql-connector 是 MySQL 官方提供的驱动器。…
阅读更多...
LLM*：路径规划的大型语言模型增强增量启发式搜索

LLM*：路径规划的大型语言模型增强增量启发式搜索

路径规划是机器人技术和自主导航中的一个基本科学问题&#xff0c;需要从起点到目的地推导出有效的路线&#xff0c;同时避开障碍物。A* 及其变体等传统算法能够确保路径有效性&#xff0c;但随着状态空间的增长&#xff0c;计算和内存效率会严重降低。相反&#xff0c;大型语言…
阅读更多...
【Db First】.NET开源 ORM 框架 SqlSugar 系列

【Db First】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…
阅读更多...
企业品牌曝光的新策略：短视频矩阵系统

企业品牌曝光的新策略：短视频矩阵系统

企业品牌曝光的新策略&#xff1a;短视频矩阵系统 在当今数字化时代&#xff0c;短视频已经渗透到我们的日常生活之中&#xff0c;成为连接品牌与消费者的关键渠道。然而&#xff0c;随着平台于7月20日全面下线了短视频矩阵的官方接口&#xff0c;许多依赖于此接口的小公司和内…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023