Примеры использования 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;} }
Отражения (в браузерах webkit)
Отражения пока еще не самая широко поддерживаемая часть CSS3, поэтому здесь она описывается в большей степени как «информация для общего развития».
Некоторое время назад я создал урок на эту тему, в котором также описано как добиться интересных эффектов при добавлении градиента к блокам с отражением в браузерах webkit. До сих пор информация из него очень помогает разработчикам.
Все что вам нужно при использовании LESS кода, приведенного ниже – это указать непрозрачность и высоту отражения. В этом нет ничего сложного.
Less:
/* Mixin */ .reflect (@length: 50%, @opacity: 0.2){ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity))); } /* Использование */ #somediv { .reflect(20%, 0.2); }
CSS
/* Результат в CSS */ #somediv { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.2))); }
Цветовые вычисления
Одной из самых уникальных возможностей LESS и Sass является проведение различных вычислений с цветами. Вы можете взять какой-то один базовый цвет и с помощью LESS автоматически создать целую палитру. Ознакомьтесь с парой примеров.
1. Комплементарная цветовая схема
В этом примере мы берем один базовый цвет, а затем при помощи функций spin, lighten и darken подбираем еще 4 цвета, которые вместе образуют палитру отлично сочетающихся цветов. Чтобы сгенерировать комплементарную цветовую схему, нам нужно передать функции spin аргумент со значение 180, что «повернуть» цветовой круг на 180 градусов и добавить несколько цветов, близких к базовому цвету.
Less
/* Mixin */ @base: #663333; @complement1: spin(@base, 180); @complement2: darken(spin(@base, 180), 5%); @lighten1: lighten(@base, 15%); @lighten2: lighten(@base, 30%); /* Использование */ .one {color: @base;} .two {color: @complement1;} .three {color: @complement2;} .four {color: @lighten1;} .five {color: @lighten2;}
CSS
/* Результат CSS */ .one {color: #663333;} .two {color: #336666;} .three {color: #2b5555;} .four {color: #994d4d;} .five {color: #bb7777;}
2. Одноцветная (монохроматическая) цветовая схема
Комплементарная цветовая схема выглядит довольно эффектно, но учитывая то, что в последнее время минималистичный дизайн стал довольно популярным, если вы решите создать сайт в таком стиле, то вам понадобиться подобрать цвета по одноцветной (монохроматической) цветовой схеме на основе базового цвета.
LESS
/* Mixin */ @base: #663333; @lighter1: lighten(spin(@base, 5), 10%); @lighter2: lighten(spin(@base, 10), 20%); @darker1: darken(spin(@base, -5), 10%); @darker2: darken(spin(@base, -10), 20%); /* Использование */ .one {color: @base;} .two {color: @lighter1;} .three {color: @lighter2;} .four {color: @darker1;} .five {color: @darker2;}
CSS
/* Результат CSS */ .one {color: #663333;} .two {color: #884a44;} .three {color: #aa6355;} .four {color: #442225;} .five {color: #442225;}
Ссылки и благодарности
Статей с описанием именно таких примеров в сети много, я украл вот отсюда: http://gaserge.ru/blog/html,css/poleznyie-primeryi-ispolzovaniya-less-pri-verstke-sajta.html
Про отражение и цветовые вычисления, отсюда: http://mattweb.ru/item/102-10-primerov-isplozovaniya-less-dlya-vashego-sajta/