CSS Variables
CSS原生变量(CSS自定义属性)
示例地址:https://github.com/ccyinghua/Css-Variables
一、css原生变量的基础用法
变量声明使用两根连词线"--"表示变量,"$color"是属于Sass的语法,"@color"是属于Less的语法,为避免冲突css原生变量使用"--"
// 声明变量
--color:#000; // 读取变量
var(--color)
注:
1、变量声明不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文
2、变量的值可以是颜色、字符串、多个值的组合等
示例:
<h3>css variables基础使用</h3>
<div class="btn_box">
<button type="button" class="login_btn">登录</button>
</div>
/* css variables基础使用 */
:root{
--content1:"abc";
--content2:"efg";
--width:calc(100px + 200px);
--btn-bg:#279cff;
--字体:18px;
}
.btn_box:before{
content:var(--content1)' with add';
display:block;
line-height: 50px;
}
.btn_box:after{
content:var(--content1)','var(--content2);
display:block;
line-height: 50px;
}
.login_btn{
width:var(--width);
height:50px;
border-radius:30px;
border:;
background: var(--btn-bg);
box-shadow: 0 5px 5px rgba(39,156,255,.42);
text-align: center;
font-size:var(--字体);
line-height: 50px;
color:#fff;
cursor:pointer;
outline:none;
}
二、作用域
1、变量是遵循CSS语法的优先级高低的 Id > class > 标签 > *
2、注意并无!important这种用法;
3、如果变量所在的选择器和使用变量的元素没有交集,是没有效果的。
<div>蓝色</div>
<div class="divbox">绿色</div>
<div class="divbox" id="alert">红色</div>
:root { --color: blue; }
.divbox { --color: green; }
#alert { --color: red; }
div{
color: var(--color);
width:300px;
line-height: 50px;
text-align: center;
}
三、响应式
div {
--color: #7F583F;
--bg: #F7EFD2;
} .mediabox {
color: var(--color);
background: var(--bg);
} @media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}
四、注意事项
1、属性名(例:width/height/margin....等)不可以走变量
.divbox {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
2、var()的完整的写法是"var(<自定义属性名> [, <默认值 ]?)",在变量的名字后面可以有一个默认值,如果引用的变量没有定义(注意,仅限于没有定义),则使用后面的值作为元素的属性值
body {
background:var(--bg,skyblue);
}
3、如果变量值是不合法的,例如下面设置背景色background只能是色值而不能是像素,则使用背景色属性的默认值代替。
body {
--bg: 20px;
background-color: #369;
background-color: var(--bg, #cd0000);
}
等同于
body {
--bg: 20px;
background-color: #369;
background-color: transparent;
}
4、CSS变量设置数值
(1)
h3 {
--size:;
font-size: var(--size)px;
}
结果h3元素的字体大小就是本身的默认大小
(2)
h3 {
--size: 30px;
font-size: var(--size);
} 等于
h3 {
font-size:30px;
}
(3)使用CSS3 calc()计算:
h3 {
--size:;
font-size: calc(var(--size) * 1px);
}
等于
h3 {
font-size:30px;
}
5、如果变量值带有单位,就不能写成字符串。
/* 无效 */
.divbox {
--size: '30px';
font-size: var(--size);
} /* 有效 */
.divbox {
--size: 30px;
font-size: var(--size);
}
6、进行calc()运算时,最好能提供默认值: calc(var(--base-line-height, 0) * 1rem)
7、不能作为媒体查询值使用:
@media screen and (min-width: var(--desktop-breakpoint) {})
8、图片地址,如url(var(--image-url)) ,不会生效
五、兼容性处理
检测浏览器是否支持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');
}
六、JS操作变量
CSS 变量可以和 JS 互相交互
:root{
--testMargin:75px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '75px' // 写入
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); // '75px'
javascript可以把任意值存入css变量,可以读取变量的值,实现javascript与css的通信。
七、CSS variables与预处理器的不同
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文件一起使用。
4、总结
- 相较于传统的 LESS 、SASS 等预处理器变量,CSS 变量的优点在于:
- CSS 变量的动态性,能在页面运行时更改,而传统预处理器变量编译后无法更改
- CSS 变量能够继承,能够组合使用,具有作用域
- 配合 Javascript 使用,可以方便的从 JS 中读/写
八、CSS原生变量的兼容性
https://caniuse.com/#search=css%20var
CSS Variables的更多相关文章
- [CSS3] Create Dynamic Styles with CSS Variables
In this lesson we are going to use CSS variables to keep our application's colors consistent. This i ...
- CSS Variables:css自定义属性的使用
CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...
- css variables & CSS 变量
css variables & CSS 变量 https://gist.github.com/xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba c ...
- 引人瞩目的 CSS 变量(CSS Variable)
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
- CSS变量(自定义属性)实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
- CSSの変数を使う
この文章はhttps://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variablesを参考します. これは実験段階の機能です.この機能は複数のブ ...
- CSS 变量教程
一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:-- ...
- 原生css 中变量的使用
前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...
随机推荐
- Spring Data JPA 缓存结合Ehcache介绍
一级缓存: 会话session.事务级别的,事务退出,缓存就失效了. 实体管理器在事务执行期间持有一份数据的拷贝,而非直接操作数据源. 二级缓存: 进程范围级或集群范围的缓存,这个级别的缓存可配置和修 ...
- 移动端适配(3)——rem适配
rem适配 <meta name="viewport" content="width=device-width,user-scalable=no"/&g ...
- Can't read stdin: end of file found
问题是在我修改svn的账号和密码后出现的,因为百度出来的情况只有一种答案,所以记录一下我的情况,给其他人多一种排查思路.问题根源是,由于该版本库只有一个账号,更改了账号密码,没有同步修改post-co ...
- BootStrap:
BootStrap: * 响应式的HTML,CSS,JS的框架. * 响应式设计: * 设计一套页面,适配不同的设备,在手机,PAD,PC端都能够正常浏览. * 响应式原理: * 使用CSS3的媒体查 ...
- Hibernate (ORM)
1 框架体系结构 2 hibernate入门 2.1 ORM框架 Hibernate是一个数据持久化层的ORM框架. Object:对象,java对象,此处特指JavaBean Relational: ...
- 解决Non-resolvable parent POM: Could not find artifact 出现的问题
在编译spring boot 多模块项目的时候,往往出现 Non-resolvable parent POM: Could not find artifact 后面跟一串其它信息,网上大部分解决方案是 ...
- mongoDB BI 分析利器 - PostgreSQL FDW (MongoDB Connector for BI)
背景 mongoDB是近几年迅速崛起的一种文档型数据库,广泛应用于对事务无要求,但是要求较好的开发灵活性,扩展弹性的领域,. 随着企业对数据挖掘需求的增加,用户可能会对存储在mongo中的数据有挖掘需 ...
- springboot 使用webflux响应式开发教程(二)
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
- Android学习——BroadCast(一)
初识广播 BroadCast即为广播,为安卓四大组件之一,用于在应用程序和Activity间传输信息.一条广播,分为发送和接收两部分,发送方通过Intent存储信息,并进行发送.接收方通过BroadC ...
- python schedule 任务调度
python schedule可以简单处理一些日常提醒的工作,下面简要说一下用法: import schedule import time def job(): print("I'm wor ...