WHAT - CSS :root 变量定义和使用(var)

在日常开发中,我们经常遇到如下 CSS 代码:

bg-primary {background-color: var(--primary-color);
}
disabled-foreground {color: var(--disabled-foreground-color);
}

这些变量通常来自于CSS变量(也称为CSS自定义属性),通常定义在CSS文件或CSS-in-JS库中,用于全局管理样式。

下面解释这些变量的来源和使用方式:

1. CSS变量的定义

CSS变量可以在CSS文件中定义,并且通常会在:root 选择器中定义,以便在整个应用程序中全局使用。例如:

:root {--primary-color: #007bff;--primary-foreground-color: #ffffff;--destructive-color: #dc3545;--destructive-foreground-color: #ffffff;--input-border-color: #ced4da;--background-color: #f8f9fa;--accent-color: #17a2b8;--accent-foreground-color: #ffffff;--secondary-color: #6c757d;--secondary-foreground-color: #ffffff;--disabled-color: #e9ecef;--disabled-foreground-color: #6c757d;
}

在这个例子中,--primary-color等变量被定义在:root选择器中,使得它们在整个CSS文件中都可以被引用和使用。

2. 在CSS中使用变量

一旦定义了这些变量,可以在CSS规则中通过var()函数引用它们。例如:

.button {background-color: var(--primary-color);color: var(--primary-foreground-color);
}.button-destructive {background-color: var(--destructive-color);color: var(--destructive-foreground-color);
}.button-outline {border: 1px solid var(--input-border-color);background-color: var(--background-color);
}.button-accent {background-color: var(--accent-color);color: var(--accent-foreground-color);
}

3. 在CSS-in-JS中使用变量

如果你使用的是CSS-in-JS库,如Styled Components或Emotion,你也可以在JavaScript/TypeScript中定义和使用这些变量。例如,在Styled Components中:

import styled from 'styled-components';const Button = styled.button`background-color: var(--primary-color);color: var(--primary-foreground-color);&.destructive {background-color: var(--destructive-color);color: var(--destructive-foreground-color);}&.outline {border: 1px solid var(--input-border-color);background-color: var(--background-color);}
`;

4. 在React项目中管理CSS变量

在React项目中,你可以将这些变量放在全局CSS文件中,通常是src/index.csssrc/App.css。你也可以通过CSS-in-JS库直接在组件中定义和使用这些变量。

5. 项目中实际应用的例子

在实际项目中,CSS变量的定义和使用通常会在项目的主样式文件中进行。例如:

/* src/index.css */
:root {--primary-color: #007bff;--primary-foreground-color: #ffffff;--destructive-color: #dc3545;--destructive-foreground-color: #ffffff;--input-border-color: #ced4da;--background-color: #f8f9fa;--accent-color: #17a2b8;--accent-foreground-color: #ffffff;--secondary-color: #6c757d;--secondary-foreground-color: #ffffff;--disabled-color: #e9ecef;--disabled-foreground-color: #6c757d;
}/* src/components/Button.css */
.button {background-color: var(--primary-color);color: var(--primary-foreground-color);
}.button-destructive {background-color: var(--destructive-color);color: var(--destructive-foreground-color);
}.button-outline {border: 1px solid var(--input-border-color);background-color: var(--background-color);
}

总结

--primary-color等CSS变量通过全局CSS定义和管理,提供了一种灵活和可维护的方式来管理应用程序中的颜色和样式。这些变量可以在CSS文件或CSS-in-JS库中定义,并在整个应用程序中引用和使用。

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

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

相关文章

Mac 下华为鸿蒙 :DevEco Studio 开发工具下载

1.登录:华为开发者中心--开发--下载工具DevEco Studio 2.下载完成后 ,安装,并创建一个新项目。 3.Tools --点击SDK Manager 下载SDK: 如果报:淘宝镜像源错误: npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_H…

Spring 的BeanPostProcessor 有什么作用?内置那些BeanPostProcessor

在 Spring 框架中,BeanPostProcessor 是一个用于在容器初始化时对 bean 的创建过程进行扩展和自定义的接口。它的作用主要体现在以下几个方面: BeanPostProcessor 的作用 前置处理 (postProcessBeforeInitialization): 在调用 bean 的初始化…

使用docker-compose给自己上传的JAR打包成镜像并自动启动容器每次更新jar包自动化执行脚本

在持续集成和部署(CI/CD)过程中,自动化是提高效率的关键。本文将介绍如何使用Docker Compose将一个上传的JAR文件打包成Docker镜像,并在容器中自动启动该应用程序。同时,创建一个脚本,以便在每次更新JAR包后…

js动态规划

动态规划(英语:Dynamic programming,简称 DP)是一种在数学、管理科学、计算机科学、经济学和生物信息学中使用的,把原问题分解为相对简单的子问题 动态规划常常适用于有重叠子问题和最优子结构性质的问题,…

优略解距离法—Topsis模型【清风数模学习笔记】

层次分析法的局限性 (1)决策层不能太多 (2)数据已知,使用层次分析法不准确 构造计算评分 相较于取卷面理论上的最高分(100)和最低分(0),取分数区间上的最…

Qt编程技巧总结篇(6)-QCustomPlot绘图篇(一)

文章目录 Qt编程技巧总结篇(6)-QCustomPlot绘图篇(一)图轴的放缩、拖拽与粗体图画标题设计轴标题设计图例设计简单画线的步骤1小结Qt编程技巧总结篇(6)-QCustomPlot绘图篇(一) 多线程学习,告一段落,这里开始使用QCustomPlot进行绘图操作,原来已经有一篇《Qt编程技巧…

Visio绘制的Tanh激活函数结构图,可导出高清图片,可修改,无水印。

Visio绘制的Tanh激活函数结构图,可导出高清图片,可修改,无水印。 方便用于小论文写作,方便用于毕业设计。 Visio版本为2021版,可用更高版本打开。 下载地址:tanh 图片展示:

深入理解树的遍历:前序遍历、中序遍历、后序遍历及层次遍历

引言 树(Tree)是一种常见的非线性数据结构,用于模拟具有层次关系的数据。树的遍历是树的基本操作之一,用于按一定顺序访问树中的所有节点。本文将详细介绍树的四种遍历方式:前序遍历、中序遍历、后序遍历及层次遍历。…

C语言程序设计10

程序设计10 问题10_1代码10_1结果10_1 问题10_2代码10_2结果10_2 问题10_3代码10_3结果10_3 问题10_1 下列给定程序中已建立一个带结点的单向链表,链表中的各结点数据中的数据递增有序链接,函数 f u n fun fun 的功能是:把形参 x x x 的值放…

【echarts】存在左右Y轴,多个图例切换时,图宽度会缩短(没有右轴,图宽度正常。 高亮右轴,图宽度会变窄。)- 已解决

问题描述: 在绘制图表时,左侧 Y 轴有一条曲线,右侧 Y 轴有三条曲线。初始化时发现,图表的宽度变窄了,这在 PC 端不太明显,但在移动端特别明显。 没有右轴,图宽度正常。 高亮右轴,图…

Windows系统设置暂停更新,暂停时间可达3000天,“永久”暂停更新,亲测有效

好多小伙伴被Windows系统的更新搞得很烦,经常在使用中自己下载更新包,占用网路资源,过段时间就要更新,特别讨厌 今天教你一招,可以暂停更新长达3000天,亲测有效 1、打开系统CMD命令执行窗口,输…

英伟达、Mistral AI 开源企业级大模型,120亿参数、可商用

全球AI领导者英伟达(Nvidia)和著名开源大模型平台Mistral.ai联合开源了,企业级大模型Mistral NeMo 12B。(以下简称“MN 12B”) 据悉,MN 12B一共有基础和指令微调两种模型,支持128K上下文长度&a…

因为很会用工具,拿下了很多客户!

作为一名想要得到更多业绩的打工人,能提高工作效率的工具一定要拥有! 今天,就给大家分享一个职场必备的提效神器,一起来看看它都有哪些功能吧! 1、多渠道客源 它可以从多个渠道去获取你想要的客户资源,无…

代码随想录——一和零(Leetcode474)

题目链接 0-1背包 class Solution {public int findMaxForm(String[] strs, int m, int n) {// 本题m,n为背包两个维度// dp[i][j]:最多右i个0和j个1的strs的最大子集大小int[][] dp new int[m 1][n 1];// 遍历strs中字符串for(String str : strs){int num0 …

题解|2024暑期牛客多校03

【原文链接】 比赛链接:2024牛客暑期多校训练营3 A.Bridging the Gap 2 题目大意 n n n个人过河,第 i i i 个人初始有 h i h_i hi​ 点体力。 由于船的限制,每次过河(或返回)至少需要乘坐 l l l 人(来…

SELECT语句

SELECT语句 前言: 在我们MySQL中,数据的存储是类似于EXCEL的,是以表格的形式存在的,所以都是一行一行的数据或者是一个一个的数据。 我们可以非常形象的理解一下,每一**列(column)都是一个对象…

免费【2024】springboot 必录德健身器材用品网的设计与实现

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

使用 Docker 快速入门 RabbitMQ:安装与基本操作

引言 RabbitMQ 是一个流行的开源消息代理软件,它支持多种消息协议,并且易于部署和使用。Docker 作为一个轻量级容器化平台,可以简化 RabbitMQ 的安装和部署过程。本文将引导你通过 Docker 快速安装 RabbitMQ,并进行一些基本操作。…

在 `JDK 17` 中使用反射

在 JDK 17 中使用反射的基本步骤如下&#xff1a; 步骤一&#xff1a;导入相关类 import java.lang.reflect.Field; import java.lang.reflect.Method; import java.lang.reflect.Constructor;步骤二&#xff1a;获取类对象 // 通过类的全限定名获取 Class 对象 Class<?&…

性能对比:Memcached 与 Redis 的关键差异

性能对比&#xff1a;Memcached 与 Redis 的关键差异 在选择合适的缓存系统时&#xff0c;Memcached 和 Redis 是最常被提及的两种技术。它们都是内存存储系统&#xff0c;用于提高数据访问速度和应用性能。尽管它们在功能上有很多相似之处&#xff0c;但在性能、特性和应用场…