Эффективное использование mixin в LESS
Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin. О том, что это такое, я уже писал в одной из предыдущих записей про LESS.
Для меня использование CSS3 уже не является каким-то ноу-хау. За пару лет практически во всех (пламенный привет IE) браузерах внедрили поддержку, если не всех, то очень многих свойств, присутствующих в CSS3.
Но несмотря на это, лучше подстраховаться и верстать кроссбраузерно, используя браузерные префиксы. Ниже привожу список миксинов для различных свойств с уточняющими комментариями.
Градиент
Задаем линейный градиент для элемента:
<span class="nc">.gradient</span><span class="o">(</span><span class="k">@from</span><span class="o">:</span> <span class="nf">#000</span><span class="o">,</span> <span class="k">@to</span><span class="o">:</span> <span class="nf">#fff</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">background-color</span><span class="o">:</span> <span class="k">@from</span><span class="p">;</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-gradient</span><span class="o">(</span><span class="nt">linear</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">top</span><span class="o">,</span> <span class="nt">left</span> <span class="nt">bottom</span><span class="o">,</span> <span class="nt">from</span><span class="o">(</span><span class="k">@from</span><span class="o">),</span> <span class="nt">to</span><span class="o">(</span><span class="k">@to</span><span class="o">))</span><span class="p">;</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">-webkit-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@from</span><span class="o">,</span> <span class="k">@to</span><span class="o">)</span><span class="p">;</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">-moz-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@from</span><span class="o">,</span> <span class="k">@to</span><span class="o">)</span><span class="p">;</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">-o-linear-gradient</span><span class="o">(</span><span class="nt">top</span><span class="o">,</span> <span class="k">@from</span><span class="o">,</span> <span class="k">@to</span><span class="o">)</span><span class="p">;</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">bottom</span><span class="o">,</span> <span class="k">@from</span><span class="o">,</span> <span class="k">@to</span><span class="o">)</span><span class="p">;</span>
<span class="err">}</span>
<span class="c">/* Пример использования */</span>
<span class="k">@color</span><span class="o">:</span> <span class="nf">#E0F8D8</span><span class="p">;</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="c">/* Фон с градиентом цвета от #E0F8D8 и до #9BE882 */</span>
<span class="nc">.gradient</span><span class="o">(</span><span class="k">@color</span><span class="o">,</span> <span class="nt">darken</span><span class="o">(</span><span class="k">@color</span><span class="o">,</span><span class="nt">20</span><span class="o">%))</span><span class="p">;</span>
<span class="err">}</span>Box-shadow
Добавляем тень к элементу. Добавлять тень можно внешнюю и внутреннюю. Если @insert задать значение true, то элементу задается внутреняя тень.
<span class="c">/* Внутреняя тень */</span>
<span class="nc">.box-shadow</span><span class="o">(</span><span class="k">@insert</span><span class="o">,</span> <span class="k">@x</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@y</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@blur</span><span class="o">:</span> <span class="nt">10px</span><span class="o">,</span> <span class="k">@color</span><span class="o">:</span> <span class="nf">#666</span><span class="o">)</span> <span class="nt">when</span> <span class="o">(</span><span class="k">@insert</span> <span class="o">=</span> <span class="nt">true</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="nt">inset</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@color</span><span class="p">;</span>
<span class="nt">box-shadow</span><span class="o">:</span> <span class="nt">inset</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@color</span><span class="p">;</span>
<span class="err">}</span>
<span class="c">/* Внешняя тень */</span>
<span class="nc">.box-shadow</span><span class="o">(</span><span class="k">@insert</span><span class="o">,</span> <span class="k">@x</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@y</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@blur</span><span class="o">:</span> <span class="nt">10px</span><span class="o">,</span> <span class="k">@color</span><span class="o">:</span> <span class="nf">#666</span><span class="o">)</span> <span class="nt">when</span> <span class="o">(</span><span class="k">@insert</span> <span class="o">=</span> <span class="nt">false</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@color</span><span class="p">;</span>
<span class="nt">box-shadow</span><span class="o">:</span> <span class="k">@x</span> <span class="k">@y</span> <span class="k">@blur</span> <span class="k">@color</span><span class="p">;</span>
<span class="err">}</span>
<span class="c">/* Упрощенный вариант использования внейшей тени */</span>
<span class="nc">.box-shadow</span><span class="o">(</span><span class="k">@x</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@y</span><span class="o">:</span> <span class="nt">0</span><span class="o">,</span> <span class="k">@blur</span><span class="o">:</span> <span class="nt">10px</span><span class="o">,</span> <span class="k">@color</span><span class="o">:</span> <span class="nf">#666</span><span class="o">)</span><span class="p">{</span>
<span class="nt">-webkit-box-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="nt">box-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Пример использования */</span>
<span class="c">/* Внутреняя тень */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="nc">.box-shadow</span><span class="o">(</span><span class="nt">false</span><span class="o">,</span> <span class="nt">2px</span><span class="o">,</span> <span class="nt">2px</span><span class="o">,</span> <span class="nt">20px</span><span class="o">,</span> <span class="nf">#999</span><span class="o">);</span>
<span class="p">}</span>
<span class="c">/* Если не указать @insert, то сгенерируется внешняя тень */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="nc">.box-shadow</span><span class="o">(</span><span class="nt">1px</span><span class="o">,</span> <span class="nt">2px</span><span class="o">,</span> <span class="nt">20px</span><span class="o">,</span> <span class="nf">#000</span><span class="o">);</span>
<span class="p">}</span>Text-shadow
Добавляем тень к тексту:
<span class="nc">.text-shadow</span><span class="o">(</span><span class="k">@x</span><span class="o">:</span> <span class="nt">1px</span><span class="o">,</span> <span class="k">@y</span><span class="o">:</span> <span class="nt">1px</span><span class="o">,</span> <span class="k">@radius</span><span class="o">:</span> <span class="nt">2px</span><span class="o">,</span> <span class="k">@color</span><span class="o">:</span> <span class="nf">#000</span><span class="o">)</span><span class="p">{</span>
<span class="nt">-webkit-text-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="nt">-moz-text-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="nt">text-shadow</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Пример использования */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="nc">.text-shadow</span><span class="o">;</span>
<span class="p">}</span>Border-radius
Задаем радиус скругления элемента:
<span class="nc">.border-radius</span><span class="o">(</span><span class="k">@r</span><span class="o">:</span> <span class="nt">3px</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">-webkit-border-radius</span><span class="o">:</span> <span class="k">@r</span><span class="p">;</span>
<span class="nt">-moz-border-radius</span><span class="o">:</span> <span class="k">@r</span><span class="p">;</span>
<span class="nt">border-radius</span><span class="o">:</span> <span class="k">@r</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Пример использования */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="o">.</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="p">(</span><span class="m">10px</span><span class="p">);</span>
<span class="p">}</span>Column
@count — определяет количество колонок в многоколоночном тексте, а @gap задаёт расстояние между колонками.
<span class="nc">.column</span><span class="o">(</span><span class="k">@count</span><span class="o">:</span> <span class="nt">3</span><span class="o">,</span> <span class="k">@gap</span><span class="o">:</span> <span class="nt">1em</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">-webkit-column-count</span><span class="o">:</span> <span class="k">@count</span><span class="p">;</span> <span class="nt">-webkit-column-gap</span><span class="o">:</span> <span class="k">@gap</span><span class="p">;</span>
<span class="nt">-moz-column-count</span><span class="o">:</span> <span class="k">@count</span><span class="p">;</span> <span class="nt">-moz-column-gap</span><span class="o">:</span> <span class="k">@gap</span><span class="p">;</span>
<span class="nt">column-count</span><span class="o">:</span> <span class="k">@count</span><span class="p">;</span> <span class="nt">column-gap</span><span class="o">:</span> <span class="k">@gap</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Пример использования */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="c">/*</span>
<span class="c"> Текст будет разбит на две колонки,</span>
<span class="c"> отступ между ними будет составлять 1.8em</span>
<span class="c"> */</span>
<span class="nc">.column</span><span class="o">(</span><span class="nt">2</span><span class="o">,</span> <span class="nt">1</span><span class="nc">.8em</span><span class="o">);</span>
<span class="p">}</span>Transition
Устанавливаем эффект перехода между двумя состояниями элемента (например обычным состоянием и :hover):
<span class="nc">.transition</span><span class="o">(</span><span class="k">@property</span><span class="o">:</span> <span class="nt">all</span><span class="o">,</span> <span class="k">@duration</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.3s</span><span class="o">,</span> <span class="k">@function</span><span class="o">:</span> <span class="nt">linear</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">-webkit-transition</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="nt">-moz-transition</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="nt">-o-transition</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="nt">transition</span><span class="o">:</span> <span class="k">@arguments</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* пример использования */</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nt">color</span><span class="o">:</span> <span class="nf">#008dd2</span><span class="o">;</span>
<span class="nt">text-decoration</span><span class="o">:</span> <span class="nt">none</span><span class="o">;</span>
<span class="nc">.transition</span><span class="o">(</span><span class="nt">color</span><span class="o">,</span> <span class="nt">0</span><span class="nc">.2s</span><span class="o">,</span> <span class="nt">linear</span><span class="o">);</span>
<span class="o">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="k">text-decoration</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
<span class="k">color</span><span class="o">:</span> <span class="m">#1a171b</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>Transform
Трансформируем элемент, в частности, можем его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
<span class="nc">.transform</span><span class="o">(</span><span class="k">@value</span><span class="o">)</span> <span class="p">{</span>
<span class="nt">-webkit-transform</span><span class="o">:</span> <span class="k">@value</span><span class="p">;</span>
<span class="nt">-moz-transform</span><span class="o">:</span> <span class="k">@value</span><span class="p">;</span>
<span class="nt">-ms-transform</span><span class="o">:</span> <span class="k">@value</span><span class="p">;</span>
<span class="nt">-o-transform</span><span class="o">:</span> <span class="k">@value</span><span class="p">;</span>
<span class="nt">transform</span><span class="o">:</span> <span class="k">@value</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Пример использования */</span>
<span class="c">/* Увеличим элемент в два раза */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">scale</span><span class="p">(</span><span class="m">2</span><span class="o">,</span><span class="m">2</span><span class="p">));</span>
<span class="p">}</span>
<span class="c">/* Изменение элемента при наведении */</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="c">/* Для плавности добавим .transition */</span>
<span class="o">.</span><span class="n">transition</span><span class="p">;</span>
<span class="o">&:</span><span class="n">hover</span><span class="err">{</span>
<span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">scale</span><span class="p">(</span><span class="m">2</span><span class="o">,</span><span class="m">2</span><span class="p">));</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="c">/*</span>
<span class="c"> Необходимо при наведении не только увеличить элемент,</span>
<span class="c"> но и повернуть его на 10 градусов? Легко!</span>
<span class="c">*/</span>
<span class="nc">.element</span><span class="p">{</span>
<span class="o">.</span><span class="n">transition</span><span class="p">;</span>
<span class="o">&:</span><span class="n">hover</span><span class="err">{</span>
<span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">rotate</span><span class="p">(</span><span class="m">10</span><span class="n">deg</span><span class="p">)</span> <span class="n">scale</span><span class="p">(</span><span class="m">2</span><span class="o">,</span><span class="m">2</span><span class="p">));</span>
<span class="c">/* (!) Запятую между функциями ставить не нужно */</span>
<span class="p">}</span>
<span class="err">}</span>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;
}Не обязательно использовать все миксины в одном проекте, достаточно добавить в LESS-файл только те, которые вам точно пригодятся. Для удобства список всех миксинов вынес в mixin.less.
Приятой верстки!
Всё, что тут написано, достигается использованием банального autoprefixer, миксины для этого не нужны.
Верно. Когда заметка была написана, о PostCSS и autoprefixer не знал.
А если используется виртуальный хостинт и на нем нет возможности установить систему сборки и соответственно PostCSS с расширением autoprefixer... Или есть какое-то решение без установки системы сборки, типа Gulp и т.п.?