оцените первый код less

[raptor-dm]

@hover-green-color-link: #1abc9c;@font-icon-hover: #23977f;@border-top-contacts: 1px solid #474747;* {box-sizing: border-box;}a {color: inherit; text-decoration: none;}body {    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;    height: 4000px;    line-height: 1.42857;}.container {    max-width: 1170px;    margin: 0 auto;    padding: 0 15px;}.top-contacts {    background: #323232;        .top-contacts-ins {        margin: 0 -15px;        overflow: hidden;                .common {            float: left;            font-size: 13px;            color: #fff;            width: 18%;            text-align: center;                        span, a {                text-transform: uppercase;            }                        span {                border-left: @border-top-contacts;                display: block;                padding: 11px 0;                                i {                    color: @font-icon-hover;                    margin:0 10px 0 0;                    font-size: 16px;                    vertical-align: text-bottom;                }            }                        a {                transition: all 200ms;                &:hover {                    color: @hover-green-color-link;                }            }                        &:first-child {                margin: 0 0 0 8.333%;            }        }                .search-wrap {            border-left: @border-top-contacts;            float: left;            width: 29.333%;            margin: 0 8.333% 0 0;                        form {                position: relative;                input[type=text] {                    background: transparent;                    border: none;                    color: #fff;                    font-size: 16px;                    padding: 9px 65px 9px 20px;                    font-weight: 300;                    width: 100%;                    height: 40px;                }                                input[type=submit] {                    position: absolute;                    height: 40px;                    background: url(../images/search-icon.png) center 10px no-repeat;                    border: none;                    border-left: @border-top-contacts;                    border-right: @border-top-contacts;                    cursor: pointer;                    width: 54px;                    right: 0;                    top: 0;                    transition: all 300ms;                                        &:hover {                        background-position: center -22px;                    }                }            }                                }    }}

это был less

а это то во что компилируется

 

/* Generated by less 2.2.0 */* {  box-sizing: border-box;}a {  color: inherit;  text-decoration: none;}body {  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;  height: 4000px;  line-height: 1.42857;}.container {  max-width: 1170px;  margin: 0 auto;  padding: 0 15px;}.top-contacts {  background: #323232;}.top-contacts .top-contacts-ins {  margin: 0 -15px;  overflow: hidden;}.top-contacts .top-contacts-ins .common {  float: left;  font-size: 13px;  color: #fff;  width: 18%;  text-align: center;}.top-contacts .top-contacts-ins .common span,.top-contacts .top-contacts-ins .common a {  text-transform: uppercase;}.top-contacts .top-contacts-ins .common span {  border-left: 1px solid #474747;  display: block;  padding: 11px 0;}.top-contacts .top-contacts-ins .common span i {  color: #23977f;  margin: 0 10px 0 0;  font-size: 16px;  vertical-align: text-bottom;}.top-contacts .top-contacts-ins .common a {  transition: all 200ms;}.top-contacts .top-contacts-ins .common a:hover {  color: #1abc9c;}.top-contacts .top-contacts-ins .common:first-child {  margin: 0 0 0 8.333%;}.top-contacts .top-contacts-ins .search-wrap {  border-left: 1px solid #474747;  float: left;  width: 29.333%;  margin: 0 8.333% 0 0;}.top-contacts .top-contacts-ins .search-wrap form {  position: relative;}.top-contacts .top-contacts-ins .search-wrap form input[type=text] {  background: transparent;  border: none;  color: #fff;  font-size: 16px;  padding: 9px 65px 9px 20px;  font-weight: 300;  width: 100%;  height: 40px;}.top-contacts .top-contacts-ins .search-wrap form input[type=submit] {  position: absolute;  height: 40px;  background: url(../images/search-icon.png) center 10px no-repeat;  border: none;  border-left: 1px solid #474747;  border-right: 1px solid #474747;  cursor: pointer;  width: 54px;  right: 0;  top: 0;  transition: all 300ms;}.top-contacts .top-contacts-ins .search-wrap form input[type=submit]:hover {  background-position: center -22px;}

это мой первый опыт с препроцессорами.

правильно ли я его использую? не громозкий ли код?

[Sergik+]

Слишком большая вложенность, замаетесь потом повторно использовть.