.css 文件中的“$menuHeight”是什么意思?
What is the meaning of the “$menuHeight” in .css Files?
在下文中,我了解到“$menuHeight”是一种实际存储特定值的变量,但为什么视觉代码为此显示错误,它现在已过时还是逻辑上错误?
$menuHeight: 65px+10px;
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
**top: $menuHeight;**
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.30);
margin: auto;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
}
$menuHeight
是SASS中的变量。可以将以下代码计算为 SASS:
$menuHeight: 65px+10px;
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
top: $menuHeight;
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.30);
margin: auto;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
}
将其输出为 CSS:
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
top: 75px;
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.3);
margin: auto;
}
#mazeContainer #mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
你可以查看这个online
在下文中,我了解到“$menuHeight”是一种实际存储特定值的变量,但为什么视觉代码为此显示错误,它现在已过时还是逻辑上错误?
$menuHeight: 65px+10px;
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
**top: $menuHeight;**
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.30);
margin: auto;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
}
$menuHeight
是SASS中的变量。可以将以下代码计算为 SASS:
$menuHeight: 65px+10px;
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
top: $menuHeight;
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.30);
margin: auto;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
}
将其输出为 CSS:
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
top: 75px;
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.3);
margin: auto;
}
#mazeContainer #mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
你可以查看这个online