Котик Антон

&-btn {
    .btn_cubic();
    .btn_cubic--orange();
    ...
}

.btn_cubic {
    ...
}

.btn_cubic--orange {
    ...
}

<script type="text/javascript">
    var less = less || {}; less.env = 'development';
</script>
<script src="less.js"></script>

@media (min-width: 600px) and (max-width: 1920px) {
    /* ... */
}

@media (min-width: 958px) {
    /* ... */
}

@mainColor: #233A59;
@mainColor2: lighten(@mainColor, 30%);
@textColor: #f4f4f4;

div#nav {
    ul{
      li{
        list-style: none;
        a {
          text-decoration: none;
          font-family: verdana;
          font-size: 14px;
          color: @textColor;
          float: left;
          padding: 15px 30px;
          border-right: 1px solid fadeout(@textColor, 60%);
          .gradient(@mainColor2, @mainColor);
          &:hover {
            .gradient (@mainColor, @mainColor2);
          }
        }
      }
   }
}

.gradient (@col, @col2) {
  background-color: @col;
  background-image: -webkit-gradient(linear, left top, left bottom, from (@col), to (@col2));
  background-image: -webkit-linear-gradient(top, @col, @col2);
  background-image: -moz-linear-gradient(top, @col, @col2);
  background-image: -ms-linear-gradient(top, @col, @col2);
  background-image: -o-linear-gradient(top, @col, @col2);
  background-image: linear-gradient(top, @col, @col2);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{col}', EndColorStr='@{col2}')";
  -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{col}', EndColorStr='@{col2}')";
}

.sidebar 
  width 260px
  height calc(100% - 65px)
  border-right 2px solid $border-color
  background-color #EFF4F7

.sidebar-item 
  border-bottom 1px solid $border-color
  a 
    display inline-block
    width 100%
    padding 14px 25px
    i 
      margin-right 12px
  &:hover 
    background-color white  
  &:first-child 
    border-top 1px solid $border-color