csswebcascading

What is the meaning of the “$menuHeight” in .css Files?


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


Solution

  • $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