Как перестать бояться и перейти на LESS

Тeпeрь oстaлoсь тoлькo сoздaть и oписaть клaссы, кoтoрыe мы будeм дaвaть элeмeнтaм-кнoпкaм. .blueButton { .button(#9fc2d2,#769cad,#FFF); } .greenButton { .button(#2ecc71,#27ae60,#FFF); } .redButton { .button(#e74c3c,#c0392b,#FFF); } .yellowButton { .button(#f1c40f,#f39c12,#FFF); }
Node.js
Eсть тaкжe функции saturate, desaturate, spin и др. Кaк? Нa стoрoнe клиeнтa В этoй стaтьe мы нe будeм oсвeщaть иx всe, нaшe дeлo — дoнeсти суть :) Сo спискoм функций и спoсoбaми примeнeния вы мoжeтe oзнaкoмиться нa oффициaльнoм сaйтe.
Прeдвaритeльнaя кoмпиляция
Нe oчeнь чaстo испoльзуeмый в пoвсeднeвнoй жизни, oднaкo дoстaтoчнo пoлeзный рaздeл. В нeкoтoрыx случаях может понадобится сделать цвет фона или текста темнее или светлее (например, при наведении). Мы можем оперировать значениями или переменными: складывая их, вычитая или умножая. Например, при использовании левого фиксированного меню. Более популярный пример это операции с цветом. Этого можно добиться путем сложения или вычитания цветов: В каких случаях это может пригодиться?
Скачайте и установите Node.js и менеджер пакетов npm

.example { background: #FFF; border: none; } .example .list { position: relative; } .example .list div { display: inline-block; } .example .list div a.exampleLink { color: #FFF; } .example .list div a.exampleLink:hover { text-decoration: none; } .example .list div a.exampleLink:active { color: #444; }

body { font-family: @fontFamily; font-size: @fontSize; background: @bgColor; color: @color; } textarea { font-family: @fontFamily; color: @color; }
Редактировать такой код будет легко и приятно. Комментируйте код (обратите внимание, что комментарии, начинающие с "//", будут удалены при компиляции, тогда как "/ /" такие комментарии будут перенесены в CSS-файл). Переменные и классы-mixin не отображаются в результирующем файле. Итог Следует заметить, что при разработке небольших сайтов с файлом стилей размером до 1000 строк, вполне можно (но вряд ли нужно) пользоваться js-библиотекой и компилировать LESS на стороне клиента (каждый раз при загрузке страницы), процесс достаточно недолгий. Используя онлайн-сервисы или десктопные программы-компиляторы, можно заранее скомпилировать файл CSS, который в дальнейшем подключить в документ. В идеале — использовать Node.js. Стили для объекта по селектору "id" следует писать вне вложенных правил, это сокращает количество строк. Если вы описываете два или более классов с почти одинаковыми стилями, вынесите повторяющиеся правила в класс-mixin, впоследствии их будет легче править. Разделите структуру на несколько частей (например: глобальные переменные, классы-mixin с кроссбраузерными стилями CSS3, cтили для основных тегов и все остальные).

@exampleColor: #9b59b6; .example { // осветляем цвет на 10% color: lighten(@exampleColor, 10%); &:hover { // затемняем цвет на 10% color: darken(@exampleColor, 20%); } }

Вложенные правила
На стороне сервера
Простой пример: Почему? Это сэкономит вам время разработки и внесения изменений и улучшит читаемость. Улучшенный синтаксис, простой код, использование переменных и операций, примешивание классов и прочие "плюшки". Так почему же стоит использовать LESS в разработке?
Страница LESS на GitHub

Приемы и структуру LESS вы так же можете изучить на примере фреймворка Twitter Bootstrap. Если вы стремитесь к тому чтобы "делать все быстрее, выше, сильнее", вам уже стоит задуматься об использовании CSS-препроцессоров. Интересный факт — начав использовать LESS, вам будет трудно вернуться к обычному CSS :)
Оффициальный сайт LESS

В CSS для указания наследования нужно было писать длинные строки, дублировать их для события hover. Например:
Winless компилятор LESS — CSS
Скомпилировать файл CSS: $ lessc styles.less
.example { @whiteBorder: 1px solid #FFF; border-top: @whiteBorder; border-bottom: @whiteBorder; } Также можно объявить переменную внутри класса, в этом случае ее можно использовать только внутри этого класса.

Для начала создадим классы-mixins для свойств CSS3. Также можно передавать в этот класс аргументы (вроде функций в программировании), что позволит нам использовать один шаблон по-разному. Очень полезно для кроссбраузерных свойств CSS3. Рассмотрим примеси на "живом примере". .borderRadius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .boxShadow (@x: 0, @y: 0, @blur: 1px, @color: #444) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; -o-box-shadow: @arguments; box-shadow: @arguments; } .gradient (@colorStart, @colorEnd) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, @colorStart), color-stop(1, @colorEnd)); background: -moz-linear-gradient(center top, @colorStart 5%, @colorEnd 100%); background: -webkit-linear-gradient(center top, @colorStart 5%, @colorEnd 100%); background: -o-linear-gradient(center top, @colorStart 5%, @colorEnd 100%); background: -ms-linear-gradient(top, @colorStart 5%, @colorEnd 100%); background: linear-gradient(center top, @colorStart 5%, @colorEnd 100%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='(@colorStart)', endColorstr='(@colorEnd)')"; background-color: @colorStart; } Есть задача описать стили для кнопок действий в нашем приложении, они должны быть разных цветов, с градиентом, тенями и скруглением углов. Если мы указываем следующий селектор через амперсанд (&), это значит, что мы описываем стили для классов или псевдоклассов принадлежащих родительскому элементу.

LESS.app компилятор LESS — CSS

Готово :)
Полезные ресурсы:

Русскоязычный сайт LESS
Функции и операции
В LESS это решается вложенностью, просто указанием одного класса внутри другого. .example { background: #FFF; border: none; .list { position: relative; div { display: inline-block; .exampleLink { color: #FFF; &:hover { text-decoration: none; } &:active { color: #444; } } } } }
@fontFamily: Arial, sans-serif; @fontSize: 12px; @bgColor: #444;
Cкомпилированный CSS будет выведен в stdout, и его можно будет перенаправить в файл с именем по вашему выбору: $ lessc styles.less > styles.css

Или с использованием встроенных в LESS функций:
Скачиваем последнюю версию less.js
@exampleColor: #9b59b6; .example { // увеличиваем значение HEX на 1 // получаем более светлый оттенок color: @exampleColor + #111; &:hover { // уменьшаем значение HEX на 1 // получаем более темный оттенок color: @exampleColor — #111; } }
Также описываем стили для псевдоэлементов :hover и :active В класс "borderRadius" мы можем впоследствии передать любое значение, если же мы просто укажем класс, но не будем ничего передавать, то значение будет равно 5px. Мы сразу примешиваем классы "borderRadius" (ничего не передаем, оставляем по умолчанию 5px), "boxShadow" (передаем аргументы, отличные от прописанных по-умолчанию) и "gradient" (передаем цвет фона). Далее опишем класс "button", который в дальнейшем будем использовать для создания кнопок. В классе "boxShadow" мы можем использовать переменную @arguments, она записывает все свойства класса в строку.
Подключаем таблицу стилей .less при помощи указания rel со значением “stylesheet/less”
Важно! Подключаем файл со стилями ДО подключения скрипта
Установите пакет less с помощью npm: $ npm install less
Подключаем less.js

Комментирование и размещение ссылок запрещено.

Комментарии закрыты.