wofh-tools.ru/technology/#sci1
html элементы поверх канвы, линии на канве.
При резайзе окна пересчитываются координаты блоков, и перерисовываются линии.
У вас линии поверх элементов, значит канву располагайте сверху. Будет небольшой геморройчик с кликами по блокам. Но решаемо. Если в лоб - pointer-event для канвы. Но у вас там похоже и ховеры по линиям надо обрабатывать. Так что придется мышку самому обрабатывать. Сложнее, но реально.
Это неправильная мысль. При использовании препроцессора вам нужно следить за чистотой исходного кода, а не скомпилированного css. Конечно, нужно понимать какие конструкции препроцессора раздувают конечный код и использовать их с умом, но чистота выходного кода не должна быть самоцелью.
Егор Живагин: в принципе полезно заниматься такой херней в свободное время. лучше начинаешь понимать как что работает, учишься нестандартно мыслить, плюс какие-то "изобретенные" техники можно будет в дальнейшем использовать в реальных проектах.