10 примеров использования LESS для вашего сайта
LESS, Sass и другие CSS-препроцессоры — отличный способ для разработчика расширить возможности CSS. Переменные, операции с цветами, примеси (mixins) и многие другие инструменты LESS помогут разработчику почувствовать выгоду от написания меньшего количества кода при достижении равноценных результатов (без использования LESS).
Самым большим «барьером» на пути освоения 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, поэтому здесь она описывается в большей степени как «информация для общего развития».
Все что вам нужно при использовании 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 файл с примерами из статьи.
