make_dev

https://habrahabr.ru/post/235531/

codepen.io/GreatRash/pen/qqPKOz

Если надо именно дивами то можно обернуть еще в один div назначить для него border-top и border-left. Для внутренних div назначить border-right и border-bottom тк внутренние дивы разные по высоте.

https://jamesflorentino.github.io/nanoScrollerJS/

Часто пользуюсь, вроде проблем с высотой нет, стили кастомные

Вот прод пример: diled.su/product/modul-iniversalnyi-u-1-16vt/order
joxi.ru/MAjl6Vvu4RMQym

codepen.io/anon/pen/jrXGRA?editors=1100

При закрытии меню к тегу основного контента добавляется класс merge-left, а к тегу меню - класс hide-left-bar:

<div id="sidebar" class="nav-collapse hide-left-bar">
   ...
</div>
<section id="main-content" class="merge-left">
   ...
</section>

#main-content {
    margin-left: 240px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.merge-left {
    margin-left: 0px !important;
}

#sidebar {
    width: 240px;
    height: 100%;
    position: fixed;
    background: #32323a;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.hide-left-bar {
    margin-left: -240px !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

Ну самый примитивный вариант выглядит так:
Создаете у себя там класс в css:

.visible {
  visibility: visible !important;
}

Потом дописываем убогий js, после вызова wow.init(), что-то типо того:

var scroll = window.pageYOffset, array = [];
wow.boxes.forEach(function (box) {
    let pos = $(box).position(), height = $(box).height();
    if (pos.top + height < scroll) {
        $(box).addClass("visible");
    } else {
        array.push(box);
    }
});
wow.boxes = array;

Смысл в том что мы при загрузке страницы смотрим где у нас тусит скролл, берем все элементы, которые подписаны на анимацию и проверяем их позицию, и если они уже были прокручены, то мы удаляем их из подписки и делаем их видимыми. Это кустарный вариант, но идея понятна, так что подкручивайте и вперед.

Тут особо ничего не поделаешь. Поругаться на дизайнера можно. Обычно дизайнеры об этом знают и делают всё через "Normal".

Так не получится.
После компиляции в CSS все переменные присвоят свои текущие значения свойствам и исчезнут из файла. Соответственно, когда вы будете менять разрешение браузера и начнут срабатывать связанные с этим разрешением медиазапросы, то внутри них уже не будет переменных, которые смогут изменить паддинги и другие свойства.

Да, можно:

$padding: 8px;

div {
  padding: $padding; // 8px
}


@media (min-width: $screen-tablet) {
  $padding: 4px;

  div {
    padding: $padding; // 4px
  }
}

Главное не запутаться :-)

Возможно лучшим решением будет не менять исходное значение, а производить вычисления:

$padding: 8px;

div {
  padding: $padding; // 8px
}


@media (min-width: $screen-tablet) {
  div {
    padding: ($padding - 4); // 8 - 4 = 4px
  }
}