here below i understand that '$menuHeight' is sort of variable that actually stores certain value but why visual code is showing error for this, is it obsolete now or logically is it wrong ?
$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
is a variable in SASS. It's possible to evaluate the following code as 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;
}
}
Will output this as 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;
}
You can check this online