css中如何定义使用变量

background:var(--baseBackground);

css中定义变量

定义变量可分多种情况：

1、定义全局变量

:root {

  --borderColor: #ccc;

}

使用：width:var(--borderColor);

2、定义某元素下的变量

.look{

  --borderColor: #ccc;

}

3、定义媒体查询下的变量

@media screen and (min-width: 1025px) {

    :root {

        --borderColor: #ccc;

　　 }

}

使用：

.has-border-table > tr > td {

  border-right: 1px solid var(--borderColor);

}

less中定义变量

定义：

@bg-color : #d9d9d9;

使用：

.has-border-table > tr > td {

  border-right: 1px solid var(@bg-color);

}

sass中定义变量

定义：

$bg-color : #d9d9d9;

使用：

.has-border-table > tr > td {

  border-right: 1px solid var($bg-color);

}