Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS.
В этой записи пойдет речь о Mixin. О том, что это такое, я уже писал в одной из предыдущих записей про LESS.

Для меня использование CSS3 уже не является каким-то ноу-хау. За пару лет практически во всех (пламенный привет IE) браузерах внедрили поддержку, если не всех, то очень многих свойств, присутствующих в CSS3.
Но несмотря на это, лучше подстраховаться и верстать кроссбраузерно, используя браузерные префиксы.

Ниже привожу список миксинов для различных свойств с уточняющими комментариями.

Градиент

Задаем линейный градиент для элемента:

.gradient(@from: #000, @to: #fff) {
  background-color: @from;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
  background-image: -webkit-linear-gradient(top, @from, @to);
  background-image:    -moz-linear-gradient(top, @from, @to);
  background-image:      -o-linear-gradient(top, @from, @to);
  background-image:         linear-gradient(to bottom, @from, @to);
}

/* Пример использования */

@color: #E0F8D8;
.element{
    /* Фон с градиентом цвета от #E0F8D8 и до #9BE882 */
   .gradient(@color, darken(@color,20%));
}

Box-shadow

Добавляем тень к элементу. Добавлять тень можно внешнюю и внутренюю. Если @insert задать значение true, то элементу
задается внутреняя тень.

/* Внутреняя тень */
.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = true) {
  -webkit-box-shadow: inset @x @y @blur @color;
          box-shadow: inset @x @y @blur @color;
}

/* Внешняя тень */
.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = false) {
  -webkit-box-shadow: @x @y @blur @color;
          box-shadow: @x @y @blur @color;
}

/* Упрощенный вариант использования внейшей тени */
.box-shadow(@x: 0, @y: 0, @blur: 10px, @color: #666){
  -webkit-box-shadow: @arguments;
          box-shadow: @arguments;
}

/* Пример использования */

/* Внутреняя тень */
.element{
    .box-shadow(false, 2px, 2px, 20px, #999);
}

/* Если не указать @insert, то сгенерируется внешняя тень */
.element{
  .box-shadow(1px, 2px, 20px, #000);
}

Text-shadow

Добавляем тень к тексту:

.text-shadow(@x: 1px, @y: 1px, @radius: 2px, @color: #000){
  -webkit-text-shadow: @arguments;
     -moz-text-shadow: @arguments;
          text-shadow: @arguments;
}

/* Пример использования */

.element{
    .text-shadow;
}

Border-radius

Задаем радиус скругления элемента:

.border-radius(@r: 3px) {
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
  border-radius: @r;
}
/* Пример использования */

.element{
    .border-radius(10px);
}

Column

@count — определяет количество колонок в многоколоночном тексте, а @gap — задаёт расстояние между колонками.

.column(@count: 3, @gap: 1em) {
  -webkit-column-count: @count; -webkit-column-gap: @gap;
     -moz-column-count: @count;    -moz-column-gap: @gap;
          column-count: @count;         column-gap: @gap;
}

/* Пример использования */

.element{
    /*
        Текст будет разбит на две колонки,
        отступ между ними будет составлять 1.8em
    */
    .column(2, 1.8em);
}

Transition

Устанавливаем эффект перехода между двумя состояниями элемента (например обычным состоянием и :hover):

.transition(@property: all, @duration: 0.3s, @function: linear) {
  -webkit-transition: @arguments;
     -moz-transition: @arguments;
       -o-transition: @arguments;
          transition: @arguments;
}

/* пример использования */

a {
  color: #008dd2;
  text-decoration: none;
  .transition(color, 0.2s, linear);
  &:hover {
    text-decoration: none;
    color: #1a171b;
  }
}

Transform

Трансформируем элемент, в частности, можем его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

.transform(@value) {
  -webkit-transform: @value;
     -moz-transform: @value;
      -ms-transform: @value;
       -o-transform: @value;
          transform: @value;
}

/* Пример использования */

/* Увеличим элемент в два раза */
.element{
    .transform(scale(2,2));
}

/* Изменение элемента при наведении */
.element{
  /* Для плавности добавим .transition */
  .transition;
  &:hover{
    .transform(scale(2,2));
  }
}

/*
    Необходимо при наведении не только увеличить элемент,
    но и повернуть его на 10 градусов? Легко!
*/
.element{
  .transition;
  &:hover{
    .transform(rotate(10deg) scale(2,2));
    /* (!) Запятую между функциями ставить не нужно */
  }
}

Opacity

Задаем прозрачность элементу:

.opacity (@opacity: 0.5) {
  -webkit-opacity: @opacity;
     -moz-opacity: @opacity;
          opacity: @opacity;
}

/* Пример использования */

/* При наведении элемент становится прозрачным */
.element{
    .opacity(1);
    &:hover{
        .opacity(0.8)
    }
}

Box sizing

Свойство применяется для изменения алгоритма расчета ширины и высоты элемента.

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	        box-sizing: @type;
}

/* Пример использования */
.element{
    .box-sizing;
}

Не обязательно использовать все миксины в одном проекте, достаточно добавить в LESS-файл только те, которые вам точно пригодятся.
Для удобства список всех миксинов вынес в mixin.less.

Приятой верстки!

Обновил: добавил миксины .opacity и box-sizing.

Система сеток с использованием Less

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

На данный момент для верстальщиков существует немалое количество CSS-библиотек, упрощающих процесс верстки. Самым популярным является всем известный фреймворк от создателей Twitter — Bootstrap.
Также всплывают в памяти Foundation framework от Mozilla и 960 Grid System.

Все они очень крутые, но, как правило, очень тяжелые для средне нагруженного проекта и содержат много лишних элементов.

Поэтому я решил написать свою систему сеток, чем-то похожую на 960 Grid System, но намного проще.

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

Лучше всего изначально скомпилировать CSS из LESS, заранее указав необходимую ширину контейнера в переменной @desktop и желаемый отступ @margin. После этого, полученный файл стилей можно минимизировать, например, онлайн-сервисом CSS Compressor.

Теперь подключаем в <head> файл:

<link rel="stylesheet" href="grid.css"/>

Дополнительные стили

  1. .module блок с отступами
  2. .alpha и .beta нужны для обнуления отступов с левой и правой стороны блока соответственно
  3. .clear переход на новую строку

Пример блока

<div class="cell-1-2"><div class="alpha module">1/2</div></div>
<div class="cell-1-2"><div class="beta module">1/2</div></div>
<div class="clear"></div>

Вы скажете, что верстку можно было бы оптимизировать, используя всего один div с классами .cell-*-* и .module. И вы будете правы. Используя свойство CSS3 box-sizing, можно добиться уменьшения элементов в верстке. Правда, в таком случае этот модный вариант сломается в старых браузерах, которые не поддерживают CSS3.
В моем случае элементов на странице будет чуть больше, но это гарантирует кроссбраузерность, что немаловажно для моих проектов.

Код

Ниже приведены примеры html-страницы с сеткой и LESS-файл с сеткой.

Что такое LESS и как его использовать

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

LESS — это надстройка над CSS. LESS — это программируемый CSS. LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания и операции.

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

Как перейти на LESS?

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

После того, как стили сконвертированы в LESS, создаем соответствующий файл с расширением .less, например style.less.

Использование

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

Если вы используете среду разработки IDEA, то советую использовать плагин. При потере фокуса программы less будет компилироваться в css, это очень удобно 🙂

Когда есть понимание того, как работать с LESS, можно переходить к основным возможностям языка, ради которого стоит его использовать:

Переменные

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

LESS
@color: #4D926F;
    #header {
      color: @color;
    }
    h2 {
      color: @color;
    }
CSS
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins (примешивания) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

LESS
.box-sizing(@a: border-box) {
  box-sizing: @a;
  -webkit-box-sizing: @a;
  -moz-box-sizing: @a;
}
.wrapper{
  .box-sizing;
}
CSS
.wrapper{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

Вложенные правила

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

LESS
.content {
a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
CSS
.content a {
  text-decoration: none;
}
.content a:hover {
  text-decoration: underline;
}

Операции

Операции позволяют увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами. Довольно удобно при задании размеров пропорциональным блокам. Например, основной части сайта и сайдбара.

LESS
@width: 960px;
.content {
   width: @width * 2/3;
}
.sidebar{
   width: @width / 3;
}
CSS
.content{
   width: 640px;
}
.sidebar{
   width: 320px;
}

Вывод

Несомненно помимо LESS есть и другие надстройки над CSS, например SCSS. Лично я предпочитаю использовать LESS, за его простоту и схожесть синтаксиса. Но что точно — для быстрого написания стилей нужно использовать надстройки, которые будут беречь ваше время. Для начала советую воспользоваться LESS, так как ничего нового учить не нужно, сразу используйте дополнительные возможности.