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. 局部作用域

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

css 复制代码

.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变量, 你可以实现一个简单的主题切换功能

javascript 复制代码

<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变量时,它会从父元素继承该变量的值

css 复制代码

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

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

css 复制代码

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

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

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动态修改变量值
支持继承和计算,增强了样式表的灵活性
避免重复代码,提高样式的复用性
使代码更具可维护性,尤其是在大型项目中