css变量

简介

如何让css像js同样拥有变量保存属性值，在开发中快速复用应该已经有了多种方案，相似less，sass等预处理器。那么如今css已经支持了本身的变量。学习了一波大佬们的知识

变量的声明

声明变量的时候，变量名前面要加两根连词线 -- 。

:root {
    --color:#000;
    --Color:#001;

}复制代码

:root伪类能够看作是一个全局做用域，在里面声明的变量，他下面的全部选择器均可以拿到

body {
    color : var(--color);
    color : var(--Color);
}复制代码

使用自定义属性来设置变量名，并使用特定的 var() 来访问,区分大小写

var(--color); var(--Color);是不一样的两个

它们与color、font-size等正式属性没有什么不一样，只是没有默认含义。因此 CSS 变量（CSS variable）又叫作"CSS 自定义属性"（CSS custom properties）。由于变量与自定义的 CSS 属性实际上是一回事。

var()函数还可使用第二个参数，表示变量的默认值。若是该变量不存在，就会使用这个默认值。

var(--bg, #111)这种状况只存在于没有默认值

其实每一个大括号都是一个做用域，内部优先级高于外部变量优先级

:root {
    --color:#000;

}
body {
    --color:#002;
    color : var(--color);
}
//这里用个大佬们的例子，下面每一个字的颜色都是按选择器的优先级现实的
<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>复制代码

须要注意的是 CSS 变量并不支持 !important 声明。

var()函数还能够用在变量的声明。

:root {
  --color: red;
  --bg: var(--color);
}复制代码

注意，变量值只能用做属性值，不能用做属性名。

:root {
  --color: color;
  var(--color): red;
}复制代码

这样是不合法的

变量值的类型

• 若是变量值是一个字符串，能够与其余字符串拼接。

  --one: '1px';
  --border: var(--one)' solid red';复制代码

• 若是变量值是数值，不能与数值单位直接连用。

  .foo {
    --top: 20;
    /* 无效，至关于没有设置 */
    margin-top: var(--top)px;
  }复制代码

• 若是变量值带有单位，就不能写成字符串。

  .foo {
    --top: "20px";
    /* 无效，至关于没有设置 */
    margin-top: var(--top);
  }复制代码

• 数值与单位直接写在一块儿，可使用calc()函数，将它们链接，不过要当心兼容问题。

  .foo {
    --top: 20;
    margin-top: calc(var(--top) * 1px);
  }复制代码

在传统的CSS概念里，属性的有效性(validity)对于自定义属性来说，并不适用。当自定义属性被解析，浏览器不知道哪里为调用到它们，因此几乎全部的值都是有效的。
不幸的是，这些有效值能经过var()函数操做符来调用，即便在当前上文没有意义。因此属性和自定义的值会致使无效的CSS声明。

1. 不能使用CSS自定义属性做为CSS属性名称：var(--side): 10px;
2. 不能做为媒体查询值使用：@media screen and (min-width: var(--min-width) {}
3. 图片地址，如url(var(--image-url)) ，不会生效

响应式布局

• 通常而言，使用媒体查询的时候，咱们须要将要响应式改变的属性所有从新罗列一遍。利用css变量的特色，能够在响应式布局的media命令里面声明变量，使得不一样的屏幕宽度有不一样的变量值。在这里它的做用将优于 LESS 和 SASS

:root {
    --mainWidth:1000px;
    --leftMargin:100px;
}

.main {
  width: var(--mainWidth);
  margin-left: var(--leftMargin);
}

@media screen and (min-width:1480px) {
    :root {
        --mainWidth:800px;
        --leftMargin:50px;
    }
}复制代码

兼容性处理

• 别处理了放弃低版本浏览器吧，过。
• 检查是否兼容:说实话我是不想检测兼容的本身试呢反正都是最新的东西，等团队决定要用了兼容问题也不会太严重

a {
  color: #7F583F;
  color: var(--primary);
}
/* 用属性值得无效声明 */

@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}
/* 也可使用@support命令进行检测。 */

const isSupported =
    window.CSS &&
    window.CSS.supports &&
    window.CSS.supports('--a', 0);

if (isSupported) {
    /* supported */
} else {
    /* not supported */
}
/* JavaScript 检测浏览器是否支持 CSS 变量。 */复制代码

JavaScript 操做

• 这也是css变量一大实用之处

• 读写属性

:root{
  --testMargin:75px;
}

var root = getComputedStyle(document.documentElement);
//  读取
var cssVariable = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable); // '75px'
// 写入
root.setProperty('--testMargin', '100px');
// 删除变量
root.removeProperty('--testMargin');复制代码

这意味着，JavaScript 能够将任意值存入样式表。

1. 网页换肤点击按钮改变CSS变量值

const btn = document.getElementById("button");
const docStyle = document.documentElement.style;
btn.onClick = function(){
    docStyle.style.setProperty('--tplColor', 'yellow');
}复制代码

1. 监听事件，事件信息存入 CSS 变量。

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
    docStyle.setProperty('--mouse-x', e.clientX);
    docStyle.setProperty('--mouse-y', e.clientY);
});复制代码

解决的问题实用性

1. 维护一个配色方案，意味着一些颜色在CSS文件中屡次出现，并被重复使用。当你修改配色方案时，不管是调整某个颜色或彻底修改整个配色，都会成为一个复杂的问题。
2. 这些变量的第二个优点就是名称自己就包含了语义的信息。CSS文件变得易读和理解。main-text-color比文档中的#00ff00更容易理解，特别是一样的颜色出如今不一样的文件中的时候。
3. 在开发过程当中减小工具的使用，减小了学习成本，能力大大提高,不须要额外的编译。
4. CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后没法更改
5. CSS 变量可以继承，可以组合使用，具备做用域
6. 配合 Javascript 使用，能够方便的从 JS 中读/写,直接连通JS和CSS

其实CSS也是一个很是牛逼的东西善用他的各类属性页面也会变得很是有趣，而他也在慢慢向可编程的方向发展。