强盛的CSS变量

水军大提督  金牌会员 | 2025-3-17 15:25:14 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 967|帖子 967|积分 2901

在 CSS 中，变量（Custom Properties） 允许你定义可重用的值，方便在整个样式表中利用和修改。CSS 变量的根本语法如下：
1. 定义 CSS 变量

CSS 变量通常在 :root 伪类中定义，以便它们可用于整个文档：
  1. :root {
  2.   --main-color: #3498db;
  3.   --secondary-color: #2ecc71;
  4.   --font-size: 16px;
  5. }
复制代码


  • 变量名称以 -- 开头，比如 --main-color
  • :root 选择器相称于 html，使变量全局可用
2. 利用 CSS 变量

在 CSS 规则中利用 var() 函数引用变量：
语法：var(自定义属性, 回退值)
  1. body {
  2.   color: var(--main-color);
  3.   font-size: var(--font-size);
  4. }
  6. button {
  7.   background-color: var(--secondary-color);
  8.   border: 2px solid var(--main-color);
  9. }
复制代码
回退值用法：
  1. /* 回退值 */
  3. /* 在 component 的样式中：*/
  4. .component .header {
  5.   /* header-color 没有被设置，将使用回退值 blue */
  6.   color: var(--header-color, blue);
  7. }
  9. .component .text {
  10.   color: var(--text-color, black);
  11. }
  13. /* In the larger application's style: */
  14. .component {
  15.   --text-color: #080;
  16. }
复制代码
利用自定义属性作为回退值
  1. :root {
  2.   --backup-bg-color: teal;
  3. }
  5. body {
  6.   /* main-bg-color 没有被设置，将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置，将使用回退值 white。 */
  7.   color: var(--main-bg-color, var(--backup-bg-color, white));
  8. }
复制代码
3. 变量的作用域



  • 变量可以定义在 :root 作用域，全局可用
  • 也可以在特定的元素中定义，仅该元素及其子元素可以利用
  1. .card {
  2.   --card-bg: #f5f5f5;
  3.   background-color: var(--card-bg);
  4. }
复制代码
4. 提供默认值

假如变量未定义，可以利用 var() 提供默认值：
  1. p {
  2.   color: var(--text-color, black); /* 如果 --text-color 未定义，则使用 black */
  3. }
复制代码
5. 在 JavaScript 中操作 CSS 变量

CSS 变量可以通过 JavaScript 动态修改：
  1. document.documentElement.style.setProperty('--main-color', 'red');
复制代码
6. CSS 变量 vs 预处置惩罚器变量

特性CSS 变量 (var())预处置惩罚器变量 (SASS/LESS)作用域运行时可变编译时确定JavaScript 操作可以修改不能修改计算可与 calc() 联合利用预计算 7. 利用场景：

- 动态主题切换


     动态主题切换
  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         :root {
  8.             --bg-color: white;
  9.             --text-color: black;
  10.         }
  12.         .dark-theme {
  13.             --bg-color: black;
  14.             --text-color: white;
  15.         }
  17.         body {
  18.             background-color: var(--bg-color);
  19.             color: var(--text-color);
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <button onclick="handleClick(event)">深色主题</button>
  25. <script>
  26.     let isDeep = false;
  27.    function handleClick(e) {
  28.        document.body.classList.toggle('dark-theme');
  29.        isDeep = !isDeep;
  30.        e.target.innerHTML = isDeep ? '浅色主题' : '深色主题';
  31.    }
  32. </script>
  33. </body>
  34. </html>
复制代码
- 动态hover


     动态hover
  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.   <style>
  7.     div {
  8.       width: 100px;
  9.       height: 100px;
  10.       background-color: #ccc;
  11.     }
  12.     div:hover {
  13.       background-color: var(--hover-bg);
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.   <div id="box" style="--hover-bg: none">hello</div>
  19.   <select id="select">
  20.     <option value="red">红</option>
  21.     <option value="green">绿</option>
  22.     <option value="blue">蓝</option>
  23.   </select>
  24.   <script>
  25.     const select = document.getElementById('select');
  26.     const box = document.getElementById('box');
  27.     box.style.setProperty('--hover-bg', select.value);
  28.     const handleChange = (e) => {
  29.       const value = e.target.value;
  30.       box.style.setProperty('--hover-bg', value);
  31.     }
  32.     select.addEventListener('change', handleChange);
  33.   </script>
  34. </body>
  35. </html>
复制代码
CSS 变量非常适合 主题切换、响应式计划、动态样式调整 等场景。
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

水军大提督

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表