Autoformatting LESS code with vim - css

Question

How to make vim format this LESS code properly? =G command gives horrific results.
Here is a sample:
// главный слайдер main slider
.herounit-row {
position: relative;
}
.hero-box {
position:absolute;
top:0;
width:100%;
.centered();
}
Here is how it looks after gg=G:
// главный слайдер main slider
.herounit-row {
position: relative;
}
.hero-box {
position:absolute;
top:0;
width:100%;
.centered();
}

Answer 1

If you want to use Vim's shipped filetypes, you can:
:set ft=scss
Afterwards gg=G should deliver the expected results.
EDIT: If it's working for all your use cases, you could also automate this via (I'm assuming the less file extension here):
autoread BufNewFile,BufRead *.less set filetype=scss

Answer 2

For me, this https://github.com/groenewege/vim-less worked nice.
But to be honest, I only see your padding line wrong, the rest seem ok.
This is your less code formated on my vim:
h1,h2,h3,h4,h5,h6 {
font-family: #main-font;
}
.browse-button {
.transition(0.4s all);
line-height: 2.3em;
padding: 0 13px 0 13px;
background: #additional-color;
font-size: 1em;
border:none;
color:#fff;
white-space: nowrap;
.border-radius(15px);
&:hover {
color:#dfdfdf;
background:lighten(#additional-color, 10%);
}
&:active {
box-shadow:inset 0px 1px 3px rgba(0, 0, 0, .5);
}
}