CSS-定义使用变量

# 定义使用变量

定义变量可分多种情况

# 定义全局变量

:root {
  --borderColor: #ccc;
}
使用：
width:var(--borderColor);

1
2
3
4
5

# 定义某元素下的变量

.look{
  --borderColor: #ccc;
}

1
2
3

# 定义媒体查询下的变量

@media screen and (min-width: 1025px) { 
    :root { 
        --borderColor: #ccc;
　　 }
}
使用：
.has-border-table > tr > td {
  border-right: 1px solid var(--borderColor);
}

1
2
3
4
5
6
7
8
9

# less中定义变量

定义：
@bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
  border-right: 1px solid var(@bg-color);
}

1
2
3
4
5
6

# sass中定义变量

定义：
$bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
  border-right: 1px solid var($bg-color);
}

1
2
3
4
5
6

上次更新: 2024/08/14, 04:14:33

← CSS-Position CSS-display→