Что означает «$ menuHeight» в файлах .css? - PullRequest
Новая
       20

Что означает «$ menuHeight» в файлах .css?

0 голосов
/ 04 ноября 2018

здесь, ниже, я понимаю, что $ 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;
        }
    }

1 Ответ

0 голосов
/ 04 ноября 2018

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

Вы можете проверить это онлайн

...