文档章节

css - 原生变量及使用函数 var()

o
 osc_ogi0qclx
发布于 2019/08/23 15:12
字数 675
阅读 3
收藏 0

精选30+云产品,助力企业轻松上云!>>>

零.序言

  前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章之后才知道这是 css 变量,不禁感叹自从 V8 引擎之后花样越来越多。经过翻查总结(也没啥总结的,翻过文档之后挺简单的),记录如下:

 

一、基本用法

变量声明:

变量声明的时候,变量名之前加上两根连词线(--)即可。例如:

body {
    --foo: #7F583F;
    --bar: #F7EFD2;
}

大小写敏感、变量名等这些参考 js 变量名规则肯定不会错,而变量名中存储的值的书写规则仍然采用 css 的规则,如:  --x: 20px 30px  而不是 --x: '20px 30px'

 

变量使用:var() 函数

var() 函数是用来读取变量,如下例:

a {
    --foo:#f1f2f5;
    --bar: red;
    color: var(--foo);
    text-decoration-color: var(--bar);
}

 

var() 函数有第二个参数,表示变量的默认值,如果该变量不存在(第一个参数),那么就使用这个默认值。并且,第一个参数后面的全部算第二个参数,不管有多少个逗号,比如:

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

 

另外, var() 函数也可作为其他变量的值,但也仅作为其他变量的值使用:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);

    /* 无效 */   
    var(--primary-color): green;   
}

 

作用域:

同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的”层叠”(cascade)规则是一致的。

<style>
    :root { --color: blue; } // 这个选择器等价于 html {}
    div { --color: green; }
    #alert { --color: red; }
    * { color: var(--color); }
</style>
<p>猜我的颜色是什么</p>    // blue
<div>猜我的颜色是什么</div> // green
<div id="alert">猜我的颜色是什么</div> // red

 

二、能帮助我们干什么?

  我个人的感觉就像是一个先行性方案,潜力很大,能用的地方很多,轮子慢慢造,目前我碰到的用处有:

  1. 方便维护;(这样说感觉很笼统)
  2. 响应式布局;(稍微减少了点代码量)
  3. 配合 calc() 函数,完成计算;
  4. ...

 

三、js 的支持

  js 中对于 css 的变量操作如下:

// 设置变量
document.body.style.setProperty('--primary', '#7F583F’);
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');

   如下例:

const docStyle = document.documentElement.style;

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

 

四、其他

  css 变量提供了 css 与 js 通信的一个新的渠道,自由性相应变广了。

  只是就目前来讲,我们需要注意各大浏览器的兼容性,摊手。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
必看的 jQuery性能优化的38个建议

一、注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里...

呵呵闯
2016/07/18
40
0
CSS变量使用解析

很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容) 最近发现主流浏览器都已经支持了这一变化 这一重要的变化,可能会让你发现,原生CSS从此变的异常强大~,...

osc_r8q2esik
2019/02/27
2
0
更好的编写Jquery

首先,在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。 首先,如果你是一个javascript新手,我建议您阅读 《JavaScript初学者的最佳实践》...

RongX
2015/04/10
6
0
高效的jQuery代码编写技巧大盘点

jQuery在Web前端开发中至关重要,好的jQuery代码会带来速度的提升,快速渲染和响应意味着更好的用户体验。 开发者在脑子的意识:jQuery就是javascript。这意味着我们应该采取相同的编码惯例,...

kouxunli1
2014/11/12
339
0
【分享】WeX5的正确打开方式(1)

最近在研究WeX5,想在这里记录下使用过程中的点滴,今天先把之前已经掌握的分享一下。 WeX5官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个...

没错就是酱紫
2016/06/21
98
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringCloud- 第六篇 Hystrix参数配置(三)

1:概述 Hystrix使用Archaius作为配置属性的默认实现。官方配置文档: https://github.com/Netflix/Hystrix/wiki/Configuration 每个属性有四个优先级,依次增大: 1:代码的全局默认值 2:动...

osc_7z601p6x
15分钟前
5
0
SpringBoot2 整合JTA组件,多数据源事务管理

本文源码:GitHub·点这里 || GitEE·点这里 一、JTA组件简介 1、JTA基本概念 JTA即Java-Transaction-API,JTA允许应用程序执行分布式事务处理,即在两个或多个网络计算机资源上访问并且更新...

osc_sju4uxml
17分钟前
11
0
Springboot + Vue + shiro 实现前后端分离、权限控制

本文总结自实习中对项目的重构。原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分...

osc_lbt7zo1x
18分钟前
13
0
docker-compose部署配置jenkins

docker-compose部署配置jenkins 一、docker-compose文件 version: '3.1'services: jenkins: image: jenkins/jenkins:lts volumes: - /data/jenkins/:/var/jenkins_home ......

osc_4p2c0ecc
20分钟前
13
0
第五周

1、查找/etc目录下大于1M且类型为普通文件的所有文件 2、打包/etc/目录下面所有conf结尾的文件,压缩包名称为当天的时间,并拷贝到/usr/local/src目录备份。 3、利用sed 取出ifconfig命令中本...

osc_hxm151is
21分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部