CSS变量(CSS variable)— CSS自定义属性

CSS 变量(CSS variable)又叫做“CSS 自定义属性”,通过声明CSS变量来设置通用的颜色、字号等,实现统一页面风格,方便后期维护,减轻开发量。

声明全局变量

在变量名称前加两个中横线 --(使用--是因为$被Sass占用,@被Less占用)

body {
	--FontColor:  #2C51CD;
	--BackGround:  #B4D4FD;
}

说明:body中声明了FontColor,BackGround的全局变量

我们也可以使用:root{}来存放所有变量,各种值都可以放入css变量中

/* 全局变量 */
:root{
  --Colors:#2C51CD;
  --fZ16px:16px;
  --main-color: #4d4e53;
  --header-height: 68px;
  --transition-duration: .5s;
  --margin-top: calc(2vh + 10px);
  --theme-bg: #f1f1f1;
}

说明:在:root中声明相当于全局属性,:root选择器是一个伪类,匹配文档的根元素,所有主流浏览器均支持 :root (除 IE8及以下)。

在HTML中,根元素永远是HTML

注意:声明变量对大小写敏感(colors和Colors表示两个不同的变量)

读取变量

使用var()函数来读取变量,var函数有两个参数,插入自定义的属性值

var(custom-property-name, value)
  • custom-property-name 必需,变量名
  • value 可选,当属性不存在的时候使用
.box-wraper{
  background-color: var(--theme-bg);
}

说明:–theme-bg即使用的变量,将变量设置到根元素:root上,下面的元素.box-wraper即可在css中使用这个变量

p {
  font-family: var(--fontFamily, "Roboto", "Helvetica");
  margin: var(--Margins, 15px 20px 25px);
}

说明:第二个参数不处理内部的逗号或空格,都视作参数的一部分

另外,var()函数还可以用在变量声明中

:root {
  --color1: pink;
  --color2: aquamarine;
  --bg: linear-gradient(to right, var(--color1), var(--color2));
}

变量值的类型

变量值是一个字符串,可以和其他字符串拼接

:root {
  --Hi: 'hello';
  --Name: var(--Hi)',world';
}

变量值是一个数值,不可以和其他字符串拼接,但可以通过calc()函数,将他们拼接起来

:root {
  --pSizeVal: 20;
  --pSize: var(--pSizeVal)'px'; // 无效
  --pSize: calc(var(--pSizeVal)*1px); // 有效
}

变量值带单位,不能写成字符串形式

:root {
  --pSize: '20px'; //无效
  --pSize: 20px; // 有效
  margin-top: var(--pSize); 
}

变量的作用域

变量的作用域分为全局作用域和局部作用域

在:root中申明的CSS变量即全局作用域的变量,即能够在CSS中任意地方应用;

局部作用域总是可以访问外层作用域或者全局作用域的变量,反之则不可;

<div class="parent">
	parent
	<div class="child">child</div>
</div>

<style>
.parent {
  --bgColor: pink; /* 局部变量 */
  color: var(--color); /* 使用子级变量无效 */
}
.child {
  background: var(--bgColor); /* 使用父级变量有效 */
  --color: red;
  color: var(--color);
}
</style>

实际项目开发过程中,都会设置字体颜色,背景色,字体大小等等,页面多次使用,或者项目主题化时,往往要大量修改,增加后期维护成本,我们可以设置一个全局的css文件,声明一些可复用的全局变量,不仅可以统一页面风格,更方便后期维护,大大提高了开发效率。

/* 创建一个 base.css文件 */
:root{
	--theme-bg: #f1f1f1;
	--color-text: 333; /* 普通字体颜色 */
	--color-high-text: blue; /* 高亮文字颜色 */
}

/* vue项目可以在main.js引入 */
@import "assets/css/base.css";

/* 使用 */
body {
	background: var(--theme-bg);
	color:var(--color-text)
}
.active{
	color: var(--color-high-text)
}

变量的作用域的强大之处,有助于系统开发代码整洁规范、模块化,当我们想要主题化某一个模块时,可以在当前模块的根元素中设置CSS变量,以便于变量向下传递,而且不会影响其他模块的元素。

注意:合理运用作用域层级和CSS变量赋值,在定义CSS变量时不能出现循环依赖关系,这会导致页面无法加载,尽量避免代码结构过于复杂以及影响页面渲染性能。


版权声明:本文为lq099526原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。