css中定義變量

css中定義變量

定義變量可分多種情況：

1、定義全局變量

:root {
  --borderColor: #ccc;
}

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);
}