Самым большим «барьером» на пути освоения LESS является то, что разработчик должен понять, чего именно он хочет добиться от этих инструментов. Эта статья поможет вам выйти на правильный путь в освоении LESS. В ней представлены 10 невероятно полезных фрагментов LESS кода (еще их называют «сниппетами»), которые вы можете начать использовать в вашем проекте уже сейчас.

Об использовании LESS

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

Сегодня я расскажу о полезных фрагментах LESS кода, которые вы можете скопировать в ваш проект.

Как этим пользоваться?

Я предлагаю читателю скопировать весь приведенный в статье код в отдельный файл .less, возможно добавить какие-то свои «штрихи» и создать своего рода LESS шаблон, который затем использовать в своих последующих проектах.

Храните этот файл отдельно от .less файлов, специально созданных для ваших проектов и просто импортируйте его в текущий проект, используя команду

CSS

@import “starter.less”;

Это позволит вам содержать код вашего проекта в порядке, тем не менее используя мощные примеси (mixins) из шаблона. По завершении работы над проектом, перед выгрузкой его в сеть вы просто скомпилируете весь LESS в обычный CSS, используя такие инструменты как Less.app или CodeKit.

Если я использую Sass

Если до настоящего момента вы использовали Sass – нет проблем. Оба этих инструмента – замечательные и я без проблем смог перейти с использования одного на другой. К счастью, оба инструмента очень похожи между собой по синтаксису команд.

К тому же, есть отличная страничка на GitHub, где сравнивается синтаксис LESS и Sass. С ее помощью вы сможете сделать преобразования кода из LESS в Sass и наоборот за считанные секунды.

Итак, давайте приступим к делу.

Закругление уголков у блоков (border-radius)

CSS-правило border-radius одно из самых основных и часто используемых на данный момент. Овальные уголки у блоков без труда помогут сделать дизайн сайта более привлекательным.

Основной особенностью этого правила, является то, что старые версии браузеров FF и Chrome его не поддерживают, используя «свои» правила с префиксами. С помощью LESS мы можем избавить себя от кучи неприятностей, используя примеси (mixins) для добавления браузерных префиксов.

1. Примеси со значением по-умолчанию

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

Первая часть кода, представленного ниже создает примесь(mixin), а во второй мы с легкостью можем вызвать код примеси и добавить закругленные уголки любому элементу, при этом не забывая про поддержку устаревших браузеров. Все, что нам нужно, это написать .border-radius(); и мы получим овальные уголки радиусом 5px (значение по-умолчанию в первом сниппете) со всех 4 сторон блока с учетом префиксов браузера. Если вы захотите поменять радиус, просто введите новое значение внутри круглых скобок.

LESS

/* Mixin */
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
 
/* Implementation */
#somediv {
    .border-radius(20px);
} 

После компиляции LESS в CSS мы получим примерно следующий код.

CSS

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

2. Примесь с параметром - передаем значение border-radius

Если вы не хотите ограничивать себя стандартными значениями, а указать значение радиуса у каждого уголка блока, то вам нужна более продвинутая возможность примесей.

Сейчас мы создадим такую примесь, передадим в нее 4 параметра: по одному для каждого уголка. Обратите внимание, что первый параметр - это значение радиуса левого верхнего угла, затем правого верхнего и так далее. Получается, что мы «обходим» блок по часовой стрелке.

LESS

/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}
 
/* Implementation */
#somediv {
    .border-radius-custom(20px, 20px, 0px, 0px);
} 

Скомпилированный CSS будет следующим.

CSS

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px 20px 0px 0px;
  -moz-border-radius: 20px 20px 0px 0px;
  border-radius: 20px 20px 0px 0px;
}

На самом деле из двух приведённых выше вариантов кода вы можете использовать второй вариант. Несмотря на то, что он делает все то же самое, что и первый, а его объем больше, он более гибкий в настройке, потому что принимает параметры закругления каждого уголка блока.

Добавление тени к блоку (box-shadow)

Далее рассмотрим другое часто используемое правило CSS3: box-shadow. Для корректного применения этого правила необходимо использовать три различных варианта его написания: обычный и с учетом префиксов браузеров. Опять же, гораздо проще передать LESS всю «тяжелую» работу.

Правилу передаются значения в следующем порядке: горизонтальное смещение тени, вертикальное смещение тени, радиус размытия и прозрачность.

LESS

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
 
/* Implementation */
#somediv {
    .box-shadow(5px, 5px, 6px, 0.3);
} 

После компиляции получим следующий CSS.

CSS

/* Compiled CSS */
#somediv {
  -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

Переходы между двумя состояниями элемента (transition)

Переходы между двумя состояниями элемента – одна из самых удивительных возможностей CSS3, доступных разработчикам на данный момент. В то же время, они могут добавить много забот в процессе кодинга, так как плохо поддерживаются браузерами. Поэтому для поддержки максимального числа браузеров, необходимо написать пять различных вариантов этого CSS-правила, учитывая все префиксы.

LESS

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
 
/* Implementation */
#somediv {
    .transition(all, 0.5s, ease-in);
} 
 
#somediv:hover {
    opacity: 0;
} 

Сейчас мы ощутим всю выгоду использования LESS: обратите внимание на длину строки кода, где вызывается примесь (mixin). Теперь не нужно набирать на клавиатуре такой длинный код каждый раз, когда вы будете использовать transition, а код в результате будет тот, который нам нужен.

CSS

/* Compiled CSS*/
#somediv {
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
 
#somediv:hover {
  opacity: 0;
}

CSS-трансформации

При трансформации объектов с помощью CSS доступны 4 варианта изменения объекта: вращение (rotate), масштабирование (scale), наклон (skew) и сдвиг (translate). Создание и размещение 6 различных вариантов кода – тяжелая работа! В этом случае нас спасет LESS.

LESS

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -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);
}
 
/* Implementation */
#someDiv {
    .transform(5deg, 0.5, 1deg, 0px);
}

CSS

/* Compiled CSS*/
#someDiv {
  -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -moz-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -o-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -ms-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}

Градиенты

При создании градиентов – используется одно из самых объемных правил CSS3. LESS предоставляет миллион различных возможностей для оптимизации работы с градиентами в CSS3. Ниже вы сможете ознакомиться с парой из них: в первом примере использования LESS с градиентами градиент состоит из двух цветов, код из второго примера может применяться к блоку с любым фоновым цветом.

1.Линейный градиент

В этой примеси вы может задавать следующие параметры для простого линейного градиента: направление, начальный цвет и конечный цвет.

LESS

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}
 
/* Implementation */
#someDiv {
    .gradient(left, #663333, #333333);
}

CSS

/* Compiled CSS */
#someDiv {
  background-color: #663333;
  background-image: -webkit-linear-gradient(left, #663333, #333333);
  background-image: -moz-linear-gradient(left, #663333, #333333);
  background-image: -o-linear-gradient(left, #663333, #333333);
  background-image: -ms-linear-gradient(left, #663333, #333333);
  background-image: linear-gradient(left, #663333, #333333);
}

2. Фоновый градиент

Одним из самых неприятных моментов при использовании градиентов в CSS является определение цветов. Иногда вам нужно по-быстрому создать градиент поверх фонового цвета элемента. Это реализуется при помощи следующей примеси.

Смысл заключается в том, что начальным цветом этого градиента является прозрачный, а конечным – черный непрозрачный. Все это размещается поверх фона элемента. Все что от вас требуется – это указать позицию от которой будет начинаться градиент и показатель полупрозрачности и вы получите прекрасный фоновый градиент.

LESS

/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) {
    background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
 
/* Implementation */
#somediv {
    background-color: BADA55;
    .quick-gradient(top, 0.2);
}

CSS

/* Compiled CSS */
#somediv {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

Отражение (в браузерах 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)));
}
 
/* Implementation */
#somediv {
    .reflect(20%, 0.2);
}

CSS

/* Compiled 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%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @complement1;}
.three {color: @complement2;}
.four  {color: @lighten1;}
.five  {color: @lighten2;}

CSS

/* Compiled 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%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

CSS

/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #884a44;}
.three {color: #aa6355;}
.four  {color: #442225;}
.five  {color: #442225;}

Заключение

Итак, подведем итог. Основная задача этой статьи – показать на примерах то, как можно работать с LESS. Возможно после прочтения вы задумаетесь об применении LESS для решения своих повседневных задач. Используя LESS в своей работе, вы сэкономите кучу времени, которое сможете потратить на что-то другое.

Скачать .less файл с примерами из статьи.

Оригинал статьи: http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/