Scroll для сайта landing page

Сайт типа landing page:

При прокрутке сайта > подсветка меню, при клике на пункт меню > прокрутка до нужного пункта... вижу это как-то так:

HTML:
header
  nav.main-nav
    a.active
    a
    a
    a
    a
    a 
main
  section.class1
  section.class2
  section.class3
  section.class4
  section.class5
  section.class6
footer

JS:

$(function() {

  $('.main-nav a').click(function() {
    $('.main-nav a').removeClass('active');    var target = $(this.hash);    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');    if (target.length) {
        $('html,body').animate({
            scrollTop: target.offset().top-$('header').height()
        }, 1000);        $(this).addClass('active');        return false;    }
  });

};

$( window ).scroll(function() {
    var winScroll = $(window).scrollTop();
        for(var i = 0; i < $('section').length; i++){
            var coorSection = $('section').eq(i).offset().top - $('header').innerHeight();            if( winScroll > coorSection){
                $('.main-nav a').removeClass('active');                $('.main-nav a').eq(i).addClass('active');            }
        }
});

П.С. header прижат к верху сайта (position:fixed)

Стилизация чекбокса

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    display: inline-block;
    padding-left: 1em;
    background: url(checkbox_states_spritesheet.png) left center no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label {
    background: url(check_radio_sheet.png) -1em center no-repeat;
}

LESS @import

Виды импортов в less:

@import (reference) "styles.less"
@import (inline) "styles.less"
@import (less) "styles.less"
@import (css) "styles.less"
@import (once) "styles.less"
@import (multiple) "styles.less"

reference - запрещает компилировать в выходной сss, css элементы с импортированного файла...

multiple - дает импортировать файл несколько раз, без этого компилятор ругается...


остальное понятно по названию... )