Примеры использования 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;}