css变量

作者: 前端阿良古 | 来源:发表于2019-04-04 15:32 被阅读0次

CSS | CSS Variable | CSS变量
css自定义变量
Vue 3单文件驱动的CSS变量（新版语法）是怎么回事
css变量操作
css变量详解
【一起来烧脑】一步Sass学会体系
CSS 变量
css 变量 --*
css变量使用var
CSS 变量

顾名思义，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);
}

3.3 效果图