CSS中自定义属性(变量)

简介: https://juejin.cn/post/7096367552808353806 CSS中自定义属性(变量)

开发过程中或多或少遇到过这样的问题。写css样式的时候,有很多都是通用样式,如果使用sass或less的话,非常好解决的。但单独只写css的时候。一旦遇到说需要改动一个颜色或者字号的大小的话就需要找到它并全局替换。

正常书写

image.png

.div1 {
    background-color: blue;
    color: #fff;
    width: 50px;
    height: 40px;
    margin: 20px;
  }
  .div2 {
    background-color: blue;
    color: #fff;
    width: 40px;
    height: 80px;
    margin: 20px;
  }
  .div3 {
    background-color: blue;
    color: #fff;
    width: 60px;
    height: 40px;
    margin: 20px;
  }
  .div4 {
    background-color: blue;
    color: #fff;
    width: 70px;
    height: 30px;
    margin: 20px;
  }
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>

可以看出上面的背景颜色和字体颜色是相同的。如果需要更改颜色那就都需要更改,替换。有什么更好的方式么?
答案当然是:有

CSS的自定义属性(变量)

自定义属性(有时候也被称作 CSS变量或者 级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如:  --main-color: black; ),由 var() 函数来获取值(比如:  color: var(--main-color) ;

复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另一个好处是语义化的标识。比如,--main-text-color 会比 #00ff00 更易理解,尤其是这个颜色值在其他上下文中也被使用到。

自定义属性受级联的约束,并从其父级继承其值。

基本用法

// 声明
:root {
    --bg-color: blue;
    --text-color: white;
 }
>
// 使用
.div1 {
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 50px;
    height: 40px;
    margin: 20px;
  }
  .div2 {
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 40px;
    height: 80px;
    margin: 20px;
  }
  .div3 {
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 60px;
    height: 40px;
    margin: 20px;
  }
  .div4 {
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 70px;
    height: 30px;
    margin: 20px;
  }

更改后效果是一样的,如果需要更改背景色只需要更改变量的值即可:

:root {
    --bg-color: hotpink;
    --text-color: black
}

image.png

注意,规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类  :root 下,这样就可以在HTML文档的任何地方访问到它了

自定义属性名是大小写敏感的,--my-color 和 --My-color 会被认为是两个不同的自定义属性。

在线体验

代码片段

更多更详细参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

相关文章
|
15天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
29 5
|
21天前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
32 2
|
21天前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
29 1
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1月前
|
前端开发 JavaScript
如何在 CSS 变量中使用函数?
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理,但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合,可以在很大程度上实现类似函数的功能,提高CSS样式的灵活性和可维护性,满足各种不同的页面设计和交互需求。
|
1月前
|
前端开发 开发者 容器
CSS 变量的作用域是什么?
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域,以及掌握变量的覆盖和继承规则,可以创建更具可维护性、灵活性和可扩展性的CSS样式表,实现各种复杂的页面设计和样式需求。
|
1月前
|
前端开发 JavaScript UED
|
1月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
27 1