May 30, 2021 Article blog
The native variable definition syntax in CSS is: --, variables use the syntax is: var(--), where the name of our variable is represented by the name of the variable;
If the css global variable is defined in the vue project:
1, first create a new index .css file under the assets directory: (
The root element of the :root document, which is a good place to put custom properties, because we can override custom properties based on the selectivity of other special styles)
2, and then introduce in the main .js file:
3, use: Use in style in the .vue file:
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);
}