Антон

Про Gulp уже ответили.

SASS, LESS - это как новые языки стилей, транспилируемые в обычный CSS. У них свой, отдельный, CSS-совместимый синтаксис, миксины, переменные, функции, и прочее.

PostCSS - сам по себе - это лишь модульный парсер. Он предоставляет легкую возможность написания плагинов. И их действительно много. Можно поставить SCSS-подобный синтаксис, и почти не заметить отличий. А сверху навесить пару плагинов типа autoprefixer. Как и что будет обрабатываться - решаете сами. Я рекомендую postcss-cssnext, готовый сет фич, которые в будущем должны поддерживать все браузеры.

Учите основы, а все подобные фреймворки одинаковы, пользоваться можно через минуту после прочтения документации.

#modal {
  display: none;
  position: fixed;
  z-index: 999;
  background-color: rgba(0, 0, 0, .5);
  top: 0; left: 0; right: 0; bottom: 0;
}
#modal:target {
  display: block;
}

<a href="#modal">Open</a>
<div id="modal">MODAL CONTENT</div>

<div class="modal-wrapper">
    <div class="modal">content</div>
  </div>

.modal-wrapper {
    position: fixed;
    z-index: 99999;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, .5);
  }
  .modal {
    width: 500px;
    max-width: 100vw;
    background-color: #fff;
  }

Рекомендую использовать css modules

Если нужна тема, то возьмите исходники вышеприведенных фреймворков в less/sass и скомпилируйте и измененными цветовыми переменными.

Попробуйте
pointer-events: none

animation-fill-mode: forwards;

не совсем понял, что требуется
мб подойдет position: sticky

Выбирай: 25 штук всяких разных
www.jqueryrain.com/demo/jquery-website-tour-plugin

document.querySelector('#name').addEventListener('keypress', e => {
    e.target.value = e.target.value[0].toUpperCase() + e.target.value.slice(1);
});

Способы почти идентичны
1. элемент с фиксированными размерами, картинка у него как фон, и background-size: cover
2. object-fit: cover у картинки с фиксированными размерами

на ум приходит
1) расширить сетку, вставить по бокам 2 плейсхолдера
2) right: calc((100vw - 1200px) / 2 + 1200px);

.menu-main td > .frame-item-menu > div > .title { 
    top: -4px; 
}

Тут уже объяснили, как сделать это с помощью jQuery. Я советую глянуть в сторону фреймворков, ибо для подобных задач они незаменимы.

Используем CSS POWER

https://codepen.io/anon/pen/XjdAvx