IT评测·应用市场-qidao123.com

标题: 强盛的CSS变量 [打印本页]
作者: 水军大提督    时间: 2025-3-17 15:25
标题: 强盛的CSS变量
在 CSS 中，变量（Custom Properties） 允许你定义可重用的值，方便在整个样式表中利用和修改。CSS 变量的根本语法如下：
1. 定义 CSS 变量

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

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. 变量的作用域


  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 变量非常适合 主题切换、响应式计划、动态样式调整 等场景。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4