Владимир Пономарев

Попробуйте сделать фиксированный внешний отступ для блока с контентом с правой стороны, а блок сайдбара фиксированной разместить справа используя position: "absolute"
Вот пример

Насколько я понимаю, стандартный подход у Laravel это использование файлов конфигурации, которые находятся в директории config. Так, например, в файле конфигурации приложения app.php находится ключ шифорования приложения (шифрование сессий и т.п.). Кроме того, такой подход позволяет переопределять соответствующие настройки из конфигурационных файлов для того или иного окружения при помощи .env файлов, чтобы каждый раз не редактировать файлы с конфигами при переносе например из окружения для разработки в продакшен.

Рассмотрите пожалуйста ваш пример, который я сделал на codepen.io. В связи с тем, что Vue компонент может быть переиспользован множество раз, его свойства data и el должны быть объявлены в виде функций а не просто как статичные свойства. Это дает возможность каждому экземпляру компонента иметь свою независимую копию значения этого свойства.

С моей невысокой колокольни как статическая верстка эта работа выполнена вполне хорошо, правда я не смотрел ее в браузерах кроме chrome и ff. Но сейчас в эпоху мобильных устройств и интернета в большинстве случаев необходима поддержка и для маленьких экранов, поэтому, я бы посоветовал попрактиковаться на макетах, делая именно отзывчивую верстку.

PS.: еще взгляните вот сюда по поводу mobile-first. Довольно часто бывает так, что поддержка маленьких экранов нужно, но макет только для десктопа, и в этом случае mobile-first не так уж просто применить.

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

Затем перехожу к адаптации макета для самого маленького экрана (например 320 px) и это процесс довольно творческий без наличия макета.

После того, как для самого маленького экрана получился приемлемый результат, и при этом ничего не было испорчено для большого экрана, я делаю адаптацию для промежуточных разрешений, просто меняя ширину "экрана" (с помощью эмуляции мобильных устройств в chrome) и исправляя все некорректные вещи. При этом добавляю необходимые медиа-запросы для данной ширины экрана и указываю там нужные CSS-свойства.

Ну а потом настает черед все это дело проверять в остальных браузерах и вносить правки если нужно.

Если используете vue.js, и, скорее всего, вам нужна отработка действия пользователя без перезагрузки страницы, тогда попробуйте плагин vue-resource. Чисто технически он отправляет на сервер запрос нужного вам типа (POST, GET итд.) с произвольными данными используя XmlHttpRequest.

this.$http.post('/select-city', {cityId: 1}).then((response) => {
          // success callback
      }, (response) => {
          // error callback
      });

Вышеприведенный сниппет может послужить примером как обрабатывать событие по клику на карточке, при этом на сервер вы можете отослать например ID карточки или что-то другое, а там уже нужно реализовать обработку POST запроса для роута /select-city (если рассматривать данный пример) и переданным ID как этого требует бизнес-логика вашего приложения.

Все-таки проблема заключалась не в Less, а во мне, а вернее в том, что я обрабатывал скопом все Less-файлы, вместо того, чтобы делать это только для изменившихся.
Для решения проблемы были использованы Gulp-плагины gulp-cached и gulp-remember, как применять можно глянуть тут или в репозиториях самих плагинов на гитхабе.
Скорость обработки стилей теперь в районе 170-200 мс, что более чем удовлетворительно.
Что касается libsass, то да, это я тоже попробую, но в другом проекте, спасибо за совет.