Как реализовать Live Template в WebStorm?

Не припомню, чтобы такая функциональность была, как workaround просто сделайте несколько таких шаблонов типа m320, m576 и т.д. имхо это будет даже быстрее, чем на стрелочки руку перемещать и несколько раз нажимать..

Умное дублирование строки с селектором в CSS (PhpStorm/WebStorm)?

andead, в scsc и иже с ними таких конструкций нет в принципе, вам пытаются это донести, наверное:

.selector {
&-foo {
&.opened {
...
}
}
}

Вот так решается вашуа проблема без костылей в scss, less, stylus.

Как такое верстают?

Если развить вашу логику, то весь дизайн должен быть выполнен из прямоугольников и кругов.

Нет практически ничего, что нельзя было бы реализовать из того, что "приходит" от дизайнера. Любой эффект можно имплементировать одним из множества способов: CSS, Javascript, Canvas, WebGL и т.д.