css变量的声明及使用

一. 定义

css变量可以称作css自定义属性，许多css中重复的值就可以用这个变量来表示，如果要修改的话那么修改变量的值就可以做到统一修改而不用一个一个在css中找出来进行修改(主要用于主题修改)

$test-color: red;  /* sass定义变量 */
@test-color: red;  /* less定义变量 */
:root{
	--test-color: red; /* css定义变量 */
}

其实在css中定义的变量是有作用域的，上面的：root代表html标签，可以再全局使用，如果定义在其他自定义class中，只有在改class内部才能使用

二.使用

/*less和sass需要import定义变量文件*/
body {
	backgroung-color: var(--test-color); /* css使用 */
	backgroung-color: $test-color; /* sass使用 */
}

通过使用var()来包裹变量，在浏览器解析时，会对变量进行处理,sass和less怎么定义就怎么使用。

三.在移动端适配使用

@media screen and (min-width: 768px) {
    body {
      --primary:  #F7EFD2;
      --secondary: #7F583F;
    }
}

四.在sass、less使用:global

为了防止生成全局样式，使用xx.module.scss会对样式文件模块化处理，在生成的css文件中自动加上一串唯一的序列号。
想让某个class不加序列号，可以作用到其他组件，那么就写到 :global

/* 在test.module.scss文件中 */
.main {
  width: 100px;
  :global {
    .ant-popover-title{
        color: red;
    }
  }
}

编译后

.main__3D0Xe{ width: 100px; }
 
.main__3D0Xe .ant-popover-title{
    color: red;
}