黑马程序员技术交流社区

标题: 【广州前端】- 学习CSS变量 [打印本页]

---

作者: 社会佩奇    时间: 2018-9-27 14:49
标题: 【广州前端】- 学习CSS变量


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

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

[CSS] 纯文本查看 复制代码

:root {

    --color:#000;

    --Color:#001;

}

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

[CSS] 纯文本查看 复制代码

body {

    color : var(--color);

    color : var(--Color);

}

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

[CSS] 纯文本查看 复制代码

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

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。
所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

[CSS] 纯文本查看 复制代码

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

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

[CSS] 纯文本查看 复制代码

:root {    --color:#000;}

body {--color:#002;   

color : var(--color);

}//这里用个大佬们的例子，下面每个字的颜色都是按选择器的优先级现实的

[HTML] 纯文本查看 复制代码

<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()函数还可以用在变量的声明。

[AppleScript] 纯文本查看 复制代码

:root {  --color: red;  --bg: var(--color);}

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

[CSS] 纯文本查看 复制代码

:root {  --color: color;  var(--color): red;}复制代码这样是不合法的

变量值的类型

• 如果变量值是一个字符串，可以与其他字符串拼接。
  [CSS] 纯文本查看 复制代码

  --one: '1px';--border: var(--one)' solid red';

• 如果变量值是数值，不能与数值单位直接连用。
  [CSS] 纯文本查看 复制代码

  .foo {  --top: 20;  /* 无效，相当于没有设置 */  margin-top: var(--top)px;}

• 如果变量值带有单位，就不能写成字符串。
  [CSS] 纯文本查看 复制代码

  .foo {  --top: "20px";  /* 无效，相当于没有设置 */  margin-top: var(--top);}

• 数值与单位直接写在一起，可以使用calc()函数，将它们连接，不过要小心兼容问题。
  [CSS] 纯文本查看 复制代码

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

  
  

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

• 不能使用CSS自定义属性作为CSS属性名称：
  [CSS] 纯文本查看 复制代码

  var(--side): 10px;

• 不能作为媒体查询值使用：
  [CSS] 纯文本查看 复制代码

  @media screen and (min-width: var(--min-width) {}

• 图片地址，如url(var(--image-url)) ，不会生效
  

响应式布局

• 一般而言，使用媒体查询的时候，我们需要将要响应式改变的属性全部重新罗列一遍。利用css变量的特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。在这里它的作用将优于 LESS 和 SASS
  

[CSS] 纯文本查看 复制代码

:root {

--mainWidth:1000px; 

 --leftMargin:100px;

}

.main {

width: var(--mainWidth); 

 margin-left: var(--leftMargin);

}

@media screen and (min-width:1480px) { 

 :root { 

 --mainWidth:800px; 

 --leftMargin:50px; 

 }

}

兼容性处理

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

[CSS] 纯文本查看 复制代码

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变量一大实用之处
  

• 读写属性
  

[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 可以将任意值存入样式表。

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

[JavaScript] 纯文本查看 复制代码

const btn = document.getElementById("button");

const docStyle = document.documentElement.style;

btn.onClick = function(){    

docStyle.style.setProperty('--tplColor', 'yellow');

}

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

[JavaScript] 纯文本查看 复制代码

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {    

docStyle.setProperty('--mouse-x', e.clientX);    

docStyle.setProperty('--mouse-y', e.clientY);

});

解决的问题实用性

• 维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题。
• 这些变量的第二个优势就是名称本身就包含了语义的信息。CSS文件变得易读和理解。main-text-color比文档中的#00ff00更容易理解，特别是同样的颜色出现在不同的文件中的时候。
• 在开发过程中减少工具的使用，减少了学习成本，能力大大提升,不需要额外的编译。
• CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改
• CSS 变量能够继承，能够组合使用，具有作用域
• 配合 Javascript 使用，可以方便的从 JS 中读/写,直接连通JS和CSS
  

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

点击查看更多精彩前端资源

点击有惊喜

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2