Пример использования 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 градусов */ }

Работа с анимацией CSS3

Код
.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;} }
2289