首页 / CSS / 什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域

什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4161字，纯文字阅读大概需要6分钟。

内容图文

CSS变量能帮助我们干什么

在一些命令式编程语言中，像Java、C++亦或是JavaScript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。
在像CSS这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。
CSS 引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量

一、什么是CSS变量

CSS 变量当前有两种形式：

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

二、变量的声明

变量的命名

变量声明使用两根连词线--表示变量，$color是属于Sass的语法，@color是属于Less的语法，为避免冲突css原生变量使用--）

注意: 变量名大小写敏感，--header-color和--Header-Color是两个不同变量

声明方式

CSS变量声明的方式非常简单，如下，声明了一个名叫color的CSS变量。

在css文件中写
写在html标签的inline-style里
用JS给某个元素声明，方法.style.setProperty

body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')

变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接

--bar: 'hello';
--foo: var(--bar)' world';


body:after {
  content: '--screen-category : 'var(--screen-category);
}

如果变量值是数值，不能与数值单位直接连用,必须使用calc()函数，将它们连接

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

注意: 变量值只能用作属性值，不能用作属性名

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

上面代码中，变量--side用作属性名，这是无效的

三、CSS变量的继承&作用域

自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素

class="one">
  <p class="two">
    <p class="three">
    </p>
    <p class="four">
    </p>
  <p>
</p>

定义下面的CSS：

.two { --test: 10px; }
.three { --test: 2em; }

在这个例子中，var(--test)的结果是：

class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值

最顶层的作用域就是:root

四、响应式

p {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

五、与预处理器的不同

1、预处理器变量不是实时的

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

编译结果

.mediabox {
  background: #7F583F; 
}

2、预处理器不能限定作用域

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

编译为

ul {
  color: blue; 
}

3、预处理器变量不可互操作

原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用

六、JS操作变量

CSS 变量可以和 JS 互相交互

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
 
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2);  // '100px'

// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'

七、兼容性

检测浏览器是否支持CSS自定义属性的方法

/*css*/

@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}
// Js

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
    alert('CSS properties are supported');
} else {
    alert('CSS properties are NOT supported');
}

总结

相较于传统的 LESS 、SASS 等预处理器变量，CSS 变量的优点在于:

CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改
CSS 变量能够继承，能够组合使用，具有作用域
配合 Javascript 使用，可以方便的从 JS 中读/写

PHP的学习--可变变量，--可变变量

php 学习日志- 变量作用域，变量

内容总结

以上是互联网集市为您收集整理的什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域全部内容，希望文章能够帮你解决什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411778.html

来源：【匿名】

【上一篇】实例讲解如何用CSS语言创作一根闪电连接线【下一篇】php无法调用css怎么办

更多 ►

【什么是CSS变量？CSS变量的学习：CSS变量的继承&作用域】教程文章相关的互联网学习教程文章

Vue style里面使用@import引入外部css, 作用域是全局的解决方案【代码】

问题描述使用@import引入外部css，作用域却是全局的<template></template><script>export default {name: "user"}; </script> <style scoped> @import "../static/css/user.css"; .user-content{background-color: #3982e5; } </style>Add "scoped" attribute to limit CSS to this component only这句话大家应该是见多了, 我也使用scoped, 但是使用@import引...

reactantd-mobile项目中如何实现css与less局部作用域化的功能

这篇文章给大家介绍的内容是关于react antd-mobile项目中如何实现 css 与 less 局部作用域化的功能，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、前言最近搭建的 react 项目想引入 less ,并实现样式局部作用域化，但是在网上找了很多方法试过了都不行，最后打到解决方法，在此记下这惨痛的历程。2、create-react-appcreate-react-app 是业界最优秀的 React 相关应用开发工具之一，本文档就是以此工具来使用...

Vue中的作用域CSS和CSS模块的区别【图】

现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到最后总是极容易地发生样式冲突：样式相互覆盖或隐式地级联到我们未考虑到的元素。为了减轻CSS存在的主要痛点，我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过 CSS Modules 、 Styled C...

在html元素中定义事件时，注意作用域链的不同_html/css_WEB-ITnose【图】

在html元素中定义事件时 1、如果不是调用的函数，那么这里的作用域链是：调用对象---->事件源---->父元素----->>document----->window 例如： var node = document.getElementById('fp') node.age = 12; age = 13 结果：12 2、如果是调用的函数，由于JS的词法作用域（函数在定义它的作用域中执行，而不是在调用它的作用域中执行），那么这里的作用域链是：调用对象--->window 例如： var nod...

JavaScript变量作用域和内存问题（二）_html/css_WEB-ITnose

执行环境是js中特别重要的概念，是指变量或者函数可以访问其他数据，定义自己的行为。每个执行环境都有一个与之相对应的变量对象，执行环境中定义的所有变量和函数都保存在这个变量中，我们看不到这个变量，但是后台可以看到。全局变量的执行环境是最外围的执行环境，在web浏览器中，全局执行环境就是window对象，所以所有的函数和全局变量都可以作为window对象的一个属性。其他执行环境都是在函数和变量执行完毕后销毁内存，...