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

强大的CSS变量

在 CSS 中,变量(Custom Properties) 允许你定义可重用的值,方便在整个样式表中使用和修改。CSS 变量的基本语法如下:

1. 定义 CSS 变量

CSS 变量通常在 :root 伪类中定义,以便它们可用于整个文档:

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}
  • 变量名称以 -- 开头,比如 --main-color
  • :root 选择器相当于 html,使变量全局可用

2. 使用 CSS 变量

在 CSS 规则中使用 var() 函数引用变量:

语法:var(自定义属性, 回退值)

body {
  color: var(--main-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--secondary-color);
  border: 2px solid var(--main-color);
}

回退值用法:

/* 回退值 */

/* 在 component 的样式中:*/
.component .header {
  /* header-color 没有被设置,将使用回退值 blue */
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/* In the larger application's style: */
.component {
  --text-color: #080;
}

使用自定义属性作为回退值

:root {
  --backup-bg-color: teal;
}

body {
  /* main-bg-color 没有被设置,将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置,将使用回退值 white。 */
  color: var(--main-bg-color, var(--backup-bg-color, white));
}

3. 变量的作用域

  • 变量可以定义在 :root 作用域,全局可用
  • 也可以在特定的元素中定义,仅该元素及其子元素可以使用
.card {
  --card-bg: #f5f5f5;
  background-color: var(--card-bg);
}

4. 提供默认值

如果变量未定义,可以使用 var() 提供默认值:

p {
  color: var(--text-color, black); /* 如果 --text-color 未定义,则使用 black */
}

5. 在 JavaScript 中操作 CSS 变量

CSS 变量可以通过 JavaScript 动态修改:

document.documentElement.style.setProperty('--main-color', 'red');

6. CSS 变量 vs 预处理器变量

特性CSS 变量 (var())预处理器变量 (SASS/LESS)
作用域运行时可变编译时确定
JavaScript 操作可以修改不能修改
计算可与 calc() 结合使用预计算

7. 使用场景:

- 动态主题切换

动态主题切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --bg-color: white;
            --text-color: black;
        }

        .dark-theme {
            --bg-color: black;
            --text-color: white;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }
    </style>
</head>
<body>
<button onclick="handleClick(event)">深色主题</button>
<script>
    let isDeep = false;
   function handleClick(e) {
       document.body.classList.toggle('dark-theme');
       isDeep = !isDeep;
       e.target.innerHTML = isDeep ? '浅色主题' : '深色主题';
   }
</script>
</body>
</html>
- 动态hover

动态hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    div:hover {
      background-color: var(--hover-bg);
    }
  </style>
</head>
<body>
  <div id="box" style="--hover-bg: none">hello</div>
  <select id="select">
    <option value="red"></option>
    <option value="green">绿</option>
    <option value="blue"></option>
  </select>
  <script>
    const select = document.getElementById('select');
    const box = document.getElementById('box');
    box.style.setProperty('--hover-bg', select.value);
    const handleChange = (e) => {
      const value = e.target.value;
      box.style.setProperty('--hover-bg', value);
    }
    select.addEventListener('change', handleChange);
  </script>
</body>
</html>

CSS 变量非常适合 主题切换、响应式设计、动态样式调整 等场景。 🚀


http://www.kler.cn/a/587875.html

相关文章:

  • LiveData 与 ViewModel 协同工作:从原理到面试实战
  • dns域名双栈解析
  • 【MySQL数据库】函数
  • pycharm专业版连接远程服务器用远程conda环境run和debug
  • 如何设计高效的数据湖架构?
  • kettle ETL 配置
  • 图片标注及流程
  • 996引擎-自定义属性-方法2:setitemcustomabil
  • 基于nodejs中@langchain/langgraph框架实现workflow
  • QT中的线程同步机制
  • 视觉slam十四讲(四)——相机与图像
  • Vue3 + Vite + Yarn + Fabricjs构建的开源演示系统
  • 基于 Verilog 的时序设计:从理论到实践的深度探索
  • 蓝桥杯每日一题01背包拔高·小A点菜
  • Navicat SqlServer 设置自增主键
  • 【人工智能】大语言模型学习大纲
  • 使用 Django 的 `FileResponse` 实现文件下载与在线预览
  • 【虚幻C++笔记】枚举UENUM、结构体USTRUCT
  • 基于CPU使用paddlex OCR识别图片内容
  • 《 线程池项目:线程池背景知识与整体架构梳理》