CSS进阶CSS变量

前言基本使用自定义属性的第一步自定义属性的继承自定义属性的回调值有效性及无效值变量怎么办通过js获取的css变量值var()和rgba()配合实现变量复用Vue实战：通过颜色选择器切换热图主题颜色前言自定义属性（有时称为CSS变量或级联变量）是CSS作者定义的实体。这些实体在文档中可以重复使用。一般按照自定义属性的符号设置（例如--main-color:black;），然后使用var()函数。（例如color:var(--main-color)）复杂的网站有很多CSS，通常有很多重复的值。例如，同一种颜色可能在数百个地方使用，从全局搜索一次性更换。自定义属性允许将此值存储在一个地方，然后在多个地方引用。另一个好处是语义可识别的符号。（语义标识符）例如，--main-text-color比#00ff00更容易理解，特别是如果这个值也存在于其他上下文中。自定义属性遵循级联，从它们的父级继承它们的值。基本用法定义自定义属性需要从--开始，然后属性的值需要是一个有效的CSS值。与任何其他属性一样，在规则集中定义它：element{--main-bg-color:brown;}请注意，规则集中的选择器定义了自定义属性可以使用的范围。一个常见的最佳实践是在:root伪类上定义它，以便它可以在HTML文档中全局访问：:root{--main-bg-color:brown;}但是你也可以在中使用css变量本地范围。注意：css变量的属性名是区分大小写的，--my-color将被视为--my-color属性。上面提到，使用自定义属性需要在var()函数中使用。element{background-color:var(--main-bg-color);}使用自定义属性的第一步，在不同的类中应用相同的颜色。.one{颜色：白色；背景颜色：棕色；边距：10px；宽度：50px；高度：50px；显示：内联块；}.two{颜色：白色；背景色：黑色；边距：10px；宽度：150px；高度：70px；显示：内联块；}。三{颜色：白色；背景颜色：棕色；边距：10px；宽度：75px;}.four{颜色：白色;背景颜色：棕色；边距：10px；width:100px;}.five{background-color:brown;