Полезные примеры
использования LESS при верстке сайта

Здесь, я рассмотрю несколько полезных фич на LESS, их можно вынести в отдельный файл и подключать к своим проектам.

@import "func.less";

Благодаря своей гибкости LESS позволяет сэкономить на времени разработки в разы. Ниже приведены основные фичи, которые используются при верстке почти каждого сайта.

.border-radius(@radius:5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    -khtml-border-radius: @radius;
}

Использование (разумеется используем только один раз для одного элемента)

.block {
    .border-radius(); /* округлит углы на 5px */
    .border-radius(10px); /* округлит углы на 10px */
    .border-radius(5px 5px 0px 0px); /* округлит на 5px только верхние углы */
    .border-radius(0px 0px 5px 5px); /* округлит на 5px только нижние углы */
}

.opacity(@val) {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=@val);
    -moz-opacity: @val/100;
    -khtml-opacity: @val/100;
    opacity: @val/100;
}

Использование (от 0 до 100 %)

.block {
    .opacity(50); /* добавит прозрачность блоку в 50% */
}

На основе генерации сервиса Ultimate CSS Gradient Generator.

/* вертикальный градиент  */
.gradient-vertical(@start: #000, @stop: #fff) {
    background: @start;
    background: -moz-linear-gradient(top,  @start 0%, @stop 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@stop));
    background: -webkit-linear-gradient(top,  @start 0%,@stop 100%);
    background: -o-linear-gradient(top,  @start 0%,@stop 100%);
    background: -ms-linear-gradient(top,  @start 0%,@stop 100%);
    background: linear-gradient(to bottom,  @start 0%,@stop 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@start, endColorstr=@stop,GradientType=0 );
}
/* горизонтальный градиент  */
.gradient-horizontal(@start: #000, @stop: #fff) {
    background: @start;
    background: -moz-linear-gradient(left,  @start 0%, @stop 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,@start), color-stop(100%,@stop));
    background: -webkit-linear-gradient(left,  @start 0%,@stop 100%);
    background: -o-linear-gradient(left,  @start 0%,@stop 100%);
    background: -ms-linear-gradient(left,  @start 0%,@stop 100%);
    background: linear-gradient(to right,  @start 0%,@stop 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@stop',GradientType=1 );
}
/* поверхностный градиент */
.gradient (@origin: top, @opacity: 0.5) {
    background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@opacity));
    background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@opacity));
    background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@opacity));
    background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@opacity));
    background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@opacity));
}

Использование:

.block {
    .gradient-vertical(red,blue); /* создаст вертикальный градиент от красного к синему цвету */
    .gradient-horizontal(red,blue); /* создаст горизонтальный градиент от красного к синему цвету */
}
.block {
     background: red; /* основной цвет, на который накладывается градиент */
     .gradient(left, 0.2) /* этот тип градиента создает быструю маску градиента на основной цвет, может использовать значения top, left, bottom, right, второй параметр - прозрачность маски */
}

Поверхностный градиент я привел здесь, потому что это штука позволяет изъебнуться с анимацией стандартными средствами CSS3 между двумя состояниями элемента, например, при наведении на элемент меняем только атрибут background. Чего нельзя сделать через linear-gradient.

.button {
     background: red; /* основной цвет, на который накладывается градиент */
     .quick-gradient(top, 0.2); /* накладываем маску */
     .transitions(all 0.5s ease); /* устанавливаем время и эффект перехода, вместо all можно поставить background */
     &:hover {
         background: blue; /* в какой цвет будет плавно переходить фон */
     }
}

.box-shadow(@val) {
	-webkit-box-shadow: @val;
	-moz-box-shadow:    @val;
	box-shadow:         @val;
}

Использование:

.block {
    .box-shadow(inset 0px 0px 5px 0px #000);
}

.transitions(@val) {
    -webkit-transition: @val;
    -moz-transition: @val;
    -ms-transition: @val;
    -o-transition: @val;
    transition: @val;
}

Использование:

.block {
    height: 50px;
    .transitions(all 2s ease);
    &:hover {
        height: 20px;
    }
}

.transform (@rotate: 90deg, @scale: 1, @skew: 0deg, @translate: 0px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

Использование, где вращение (rotate), масштабирование (scale), наклон (skew) и сдвиг (translate):

.block {
    .transform(90deg, 1, 0deg, 0px); /* поворот на 90 градусов */
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
    -webkit-animation: @name @duration @delay @ease;
    -moz-animation: @name @duration @delay @ease;
    -ms-animation: @name @duration @delay @ease;
    animation: @name @duration @delay @ease;
}

Использование:

.block {
    height: 50px; width: 50px;
    background: red;
    .animation(mymove, 2s, infinite, linear);
}
@-webkit-keyframes mymove {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
@keyframes mymove {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

Файл func.less прикрепляю. На здоровье.