css变量
2019-04-04 本文已影响0人
前端阿良古
顾名思义，css变量，就是原生css里面也可以像less/sass一样，拥有定义变量的能力
一、语法
定义时：变量名前面要加两根连词线（--），如：--bg-color,
使用时：用var()来访问变量
二、基本用法
随便写个简单的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css Variables</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<p>这是container的子节点</p>
</div>
<div class="box">这是个盒子</div>
</body>
</html>
- 定义全局变量
:root{
--bg-color: #ff0000;
--font-color: #fff;
}
.box{
text-align: center;
line-height: 100px;
height: 100px;
width: 100px;
background: var(--bg-color);
color: var(--font-color);
}
全局变量生效
- 局部变量
.container{
--bg-color: #ff0000;
--font-color: #fff;
}
p{
background: var(--bg-color);
color: var(--font-color);
}
.box{
text-align: center;
line-height: 100px;
height: 100px;
width: 100px;
background: var(--bg-color);
color: var(--font-color);
}
局部变量只在子节点生效
-
引入不同css文件的自定义变量可以使用吗？答案是可以的
动手写一写，在css文件夹里面新增了个var.css文件，整个的目录截图：
demo目录截图
3.1 把自定义变量移到var.css文件中
:root{
--bg-color: #ff0000;
--font-color: #fff;
}
3.2 引入var.css并使用
@import './var.css'; /* 这样就引入成功了 */
p{
background: var(--bg-color);
color: var(--font-color);
}
.box{
text-align: center;
line-height: 100px;
height: 100px;
width: 100px;
background: var(--bg-color);
color: var(--font-color);
}
证明外部引入的变量样式也能生效
三、浏览器兼容性
兼容性这个东西，去can I use查一下，就一目了然了
浏览器兼容性
