CSS变量，CSS自定义属性

最新推荐文章于 2023-06-23 22:09:07 发布

墨语轩

最新推荐文章于 2023-06-23 22:09:07 发布

阅读量351

点赞数

分类专栏： CSS3相关文章标签： CSS变量 CSS自定义属性 CSS变量的继承 CSS 自定义属性

本文链接：https://blog.csdn.net/MFWSCQ/article/details/104879374

版权

CSS3相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们知道变量是可以在整个程序中使用的值的容器或占位符。并且，如果需要更改值，则只需更改变量的值，而不必更改所出现有的变量位置的值。

什么是CSS变量

CSS 变量当前有两种形式：

变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。

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

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

自定义属性受级联的约束，并从其父级继承其值。CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

CSS变量的好处

以下是您应该关注此功能的两个原因：

在整个样式表中更改相同的值非常容易。
它使创建主题变得容易，可以在样式表中始终保留两到三种颜色，而没有任何变化或猜测。

element1 {
  --pinkColor: #FFC0CB;
}
.elementUnderElement1 {
  color: var(--pinkColor);
  border: 1px solid var(--pinkColor);
}

如上所述，CSS 变量可以称为您定义的自定义属性。前面的双连字符（-）pinkColor 表示该属性是自定义的。这也是产生变量的原因。

在 elementUnderElement1 类中，可以通过调用 var() 函数并将自定义属性作为参数来使用变量。

关于CSS变量的几点知识

它们区分大小写。
他们可以拥有任何的值。当使用 var() 函数调用它们时，将使用它们的值。请记住，变量就像占位符一样。
如果为属性调用的值与语法不符（例如color：20px;），则使用继承的颜色或初始颜色。这是CSS的正常行为。
变量是自定义属性，属性可以在任何地方声明，因此您可以在任何元素中声明变量。
您可以在任意位置声明任意数量的变量。

变量作用域

在编程语言中，您必须已经听说过作用域这一术语，它定义了变量的环境（即程序的哪个区域可以访问该变量）。CSS也是如此。为变量的 element1 作用域定义变量，以便只有 element1element 及其子元素（例如 elementUnderElement1class）可以访问该变量。

如果要声明全局变量怎么办？

:root 🔥

根据MDN，

在:root CSS 伪类代表文档树的根元素相匹配。在HTML中，:root 代表 <html> 元素，并且与选择器相同 html，不同之处在于它的特异性更高。

此处声明的任何变量都可以在样式表中的任何元素使用。例：

:root {
  --largeFontSize: 50px;
  --smallFontSize: 20px;
  --color: #fcfcfc;
}
h1 {
  font-size: var(--largeFontSize);
}
@media only screen and (max-width: 400px){
  h1 {
    font-size: var(--smallFontSize);
  }
}

通过普通的 JS 获取 CSS 的自定义属性值

例如上面 :root 中的-colorl 变量值：

let root = document.querySelector(':root');
let rootStyles = getComputedStyle(root);
let color = rootStyles.getPropertyValue('--color');
console.log(color); //"#fcfcfc"

通过 JS 设置 CSS 自定义属性值

接着上面的代码栗子：我们改变 --color 变量的值为 green

root.style.setProperty('--color','green');

有效性(validity)和值

在传统的CSS概念里，属性的有效性(validity)对于自定义属性来讲，并不适用。当自定义属性被解析，浏览器不知道哪里为调用到它们，所以几乎所有的值都是有效的。

不幸的是，这些有效值能通过var()函数操作符来调用，即使在当前上文没有意义。属性和自定义的值会导致无效的CSS声明，所以有了计算时有效(valid at computed time)的概念。

解决的问题

在构建大型站点时，作者通常会面对可维护性的挑战。在这些网页中，所使用的 CSS 的数量是非常庞大的，并且在许多场合大量的信息会重复使用。例如，在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。

如果使用了 CSS 框架，这种情况会变得尤其糟糕，此时如果要修改颜色，则需要对框架本身进行修改。在这些场合使用 LESS 或 Sass 类似的预处理器是非常有帮助的，但是这种通过添加额外步骤的方式，可能会增加系统的复杂性。CSS变量为我们带来一些预处理器的便利，并且不需要额外的编译。

这些变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解。main-text-color比文档中的#00ff00更容易理解，特别是同样的颜色出现在不同的文件中的时候。

应用场景举栗：

1.作为 web 主题颜色更换

更换主题我们可以整体更换字体颜色，对应不同板块的背景颜色等

:root{
    --main-bg-color:red;
    --dark-bg-color:#ccc;
    --light-bg-color:#fff;
}

body{
    background-color:var(--main-color);
}

2.再作适配时，不同屏幕大小

.content{
    grid-template-columns:200px 200px;
}


/*
* 改进为属性代替
*/

/*
* variable declare
*/
:root{
    --yellow:yellow;
    --red:#c00;
}

.content{
    --columns:200px 200px;
}

/*
* styles
*/

h1,p{
    color:var(--red);
}
.content{
    display:grid;
    grid-template-columns:var(--columns);
    grid-auto-rows:140px;
    grid-gap:20px;
    justify-content:center;
}

@media all and (max-width:450px){
    .content{
        --columns:200px;
    }
    :root{
        --red:red;
    }
}

3.多个位置多次使用同一个属性值

例如我们颜色是 #c0ffc0 ，每次记住他或者复制粘贴都很麻烦，我们可以给他定义一个别名，然后轻松引用。还比如margin，padding，font-size，border 等多次出现的都可以使用 css 自定义属性值

总结

CSS使网页中颜色，大小和其他属性值的一致性变得容易。

它还允许轻松更改值。想象一下在一个页面中使用20个属性的颜色值。变量可以在顶层元素中声明，变量函数可以在20个位置调用。如果需要更改该值，则不必检查20次外观，只关心声明变量的顶级元素。

但是，在命名变量时应该多加考虑。您可以使用mainColor，而不是使用pinkColor作为自定义属性。如果出于任何原因，您可以将颜色变量的值更改为与粉色完全不同的颜色，这一点很重要。

墨语轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS变量，CSS自定义属性

我们知道变量是可以在整个程序中使用的值的容器或占位符。并且，如果需要更改值，则只需更改变量的值，而不必更改所出现有的变量位置的值。什么是CSS变量CSS 变量当前有两种形式：变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值自定义属性。这...
复制链接

扫一扫