css3的 --自定义属性, 变量

1. 什么是 -- 自定义属性?

CSS3 引入了自定义属性,也就是我们说的css变量, 这些变量可以在css中的任何位置使用,与js中变量不同,CSS变量的作用域是基于DOM结构的,换句话说,变量可以被局部或全局使用,这取决于它们声明位置,与传统的CSS样式表中直接写死的值不同,自定义属性可以在多个地方被引用和修改,CSS自定义属性的定义以--开头,且必须var( )函数来引用

语法规则: 

• 定义: --变量名: 值; 
• 使用: var(--变量名,[可选的默认值])
• 例子: 

1. 全局作用域

//定义   :root选择器, 确保它们在全局范围内有效   

:root {
--main-color: #3498db;
--font-size: 16px;
}

//其他页面都可以使用
body {
background-color: var(--main-color);
font-size: var(--font-size);
}

2. 局部作用域

如果在特定的选择器中定义了变量,它们只会在改选择器内部生效 

.container {--local-color: #ff6347;
}.container p {color: var(--local-color);
}.container .title {color: var(--local-color);
}

3.CSS变量的默认值

声明了CSS自定义属性之后,在使用var( )时,可以为变量提供一个默认值,如果改变量未定义或者无法找到时,CSS会使用这个默认值,这可以防止页面渲染时因缺少变量而导致的错误, var( )函数接受两个参数: 

• 必需的参数: 引用CSS变量名
• 可选的默认值: 如果变量未定义或不可用,使用次默认值

div{

  color: var(--undefined-color,#333);  //如果--undefined-color 未定义,使用#333

}

在这个例子中,如果--undefined-color没有定义, color属性会使用默认的#333值

4. 动态改变CSS变量 

CSS变量不仅可以在静态样式表中使用,还可以在js中动态修改,这使得开发者可以通过js实现动态主题切换,响应式设计和交互样式调整功能

1.在js中修改css变量 

可以通过style.setProperty( ) 方法动态更改CSS变量

document.documentElement.style.setProperty('--primary-color', '#9b59b6');

这行代码会把全局变量 --primary-color 的值修改为 #9b59b6

或者CSS修改(鼠标移入按钮,改变变量)

button: hover{

        --primary-color : #3498db  //修改变量

}

2.实现主题切换, 通过js和css变量, 你可以实现一个简单的主题切换功能

<button onclick="toggleTheme()">切换主题</button><style>:root {--background-color: white;--text-color: black;}body {background-color: var(--background-color);color: var(--text-color);}
</style><script>function toggleTheme() {const currentBackground = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();if (currentBackground === 'white') {document.documentElement.style.setProperty('--background-color', '#333');document.documentElement.style.setProperty('--text-color', '#fff');} else {document.documentElement.style.setProperty('--background-color', 'white');document.documentElement.style.setProperty('--text-color', 'black');}}
</script>

点击按钮后,toggleTheme( ) 函数会动态切换 --background-color 和-text-color变量,从而实现白天/黑夜主题的切换

5.CSS变量的继承,计算和媒体查询使用

CSS变量支持继承和计算,可以利用数学表达式来操作变量的值,增强样式的灵活性 

1.  当一个元素没有定义某个CSS变量时,它会从父元素继承该变量的值 

:root {--base-padding: 10px;
}.container {padding: var(--base-padding);
}.card {padding: var(--base-padding);  /* 继承自 .container */
}

2.可以在CSS变量中使用计算,比如通过calc( ) 函数来计算尺寸

:root {--base-size: 20px;
}.element {width: calc(var(--base-size) * 2);height: calc(var(--base-size) + 10px);
}

3.css变量与媒体查询结合使用

CSS变量非常适合和媒体查询一起使用,能够帮助你轻松地创建响应式设计,你可以在不同的屏幕尺寸下,修改变量的值以实现不同的布局主题

:root {--font-size: 16px;
}body {font-size: var(--font-size);
}@media (max-width: 600px) {:root {--font-size: 14px; /* 在小屏幕下修改字体大小 */}
}

6.总结 

css自定义属性var( )函数式CSS中强大的工具,它使得开发者可以更加灵活地管理样式,提高代码的可维护性,并且可以通过js动态修改样式,通过合理使用CSS变量,我们能够更高效地阻止样式代码,轻松实现主题切换和响应式设计等功能

关键点总结: 

• 变量通过--定义,在var( ) 中引用
• 可以使用全局和局部作用域 
• 可以为变量提供默认值
• 可以通过js动态修改变量值
• 支持继承和计算,增强了样式表的灵活性
• 避免重复代码,提高样式的复用性
• 使代码更具可维护性,尤其是在大型项目中