Ruby on Rails c нуля!

Перевод оффициальной документации с

LESS — Ruby gem, позволяющий ускорить и сделать более удобным написание CSS-кода для дизайна ваших веб приложений. LESS даёт возможность изящно обойти различные неудобства работы на «чистом» CSS. Его разработчики находились под впечатлением от других подобных разработок и в большей мере от любимого многими SASS.

Зачем же понадобилось создавать LESS, если существует и чрезвычайно популярен SASS?
Все просто: дело в синтаксисе!

SASS действительно очень удобен, но у этого удобства есть и высокая цена — изучение нового синтаксиса и полная переработка вашего CSS кода в код на SASS.

Итак, чем же так хорош LESS?

• он обладает всеми возможностями CSS и многими удобствами, которые предоставляет SASS;
• он отлично интегрируется в уже работающие проекты;
• его внедрение не вынуждает разработчиков совершать много ненужной работы по переписыванию кода и изучению нового синтаксиса;
• и, наконец,  он позволяет  постепенно, шаг за шагом преобразовывать ваш код из CSS в LESS.

Разработчиком LESS является Alexis Sellier в кругах Ruby-программистов также известный под псевдонимом cloudhead. Помогал ему в разработке LESS Dmitry Fadeyev – дизайнер, автор блога .

Быстрый старт с LESS

Установка, или «ввязываемся во все это»

LESS является расширением CSS, можно даже сказать, что LESS — это диалект CSS, который предоставляет нам много удобных возможностей. Это, например, возможность использования переменных; наследования правил; примеси, операции, вложенные правила и т.п.
LESS обратно совместим с CSS — это значит что код, написанный на «чистом» CSS, будет восприниматься LESS как родной. Это очень упрощает разработку т.к. используется уже знакомый вам синтаксис CSS. Единственным отличием кода на LESS от кода на CSS, кроме различных «трюков», является необходимость его компилирования. Этой операцией занимается компилятор, который, по сути, и является gem’ом. Для установки gem’а LESS воспользуйтесь следующей командой:

gem install less

Начало работы с gem

Компилятор LESS носит название lessc. Вызов lessc из командной строки выглядит приблизительно так:

$ lessc source [destination]

Source — это файл LESS который вы хотите компилировать в CSS, а destination это имя CSS файла в который будет компилирован код на LESS. Если вы не указали имя исходного СSS файла, lessc даст CSS файлу имя то же, что и у файла с кодом на LESS. Единственное отличие – это расширение файлов(*css – для CSS и *.less – для LESS):

$ lessc style.less style.css
$ lessc style.less

Приведенные выше команды компиляции LESS в CSS абсолютно одинаковы.

Наблюдение, или «не опасайтесь слежки»

Lessc поставляется с механизмом наблюдения за изменениями в вашем .less файле и перекомпилирует его автоматически, если это необходимо:

$ lessc style.less —watch

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

* Watching for changes in style.less… Ctrl-C to abort.
: Change detected… * [Updated] style.css
:

Двоеточие «:» в этом случае напоминает пару глаз бдительно наблюдающих за вашим файлом 8)

Компилируем LESS в CSS из Ruby

require 'less'
Less.parse "div { width: 1 + 1 }"

Результат получаем следующий:

div { width: 2; }

Как видите – довольно просто!
Стоит познакомиться еще с двумя способами работы с компилятором LESS из кода на Ruby:

Less::Engine.new("a { color: blue }").to_css
Less::Engine.new(File.new("style.less")).to_css
less = Less::Engine.new(".post { color: blue }").to_tree
less[".post"].properties # => [color: `blue`]

Язык

Как уже говорилось выше, LESS можно назвать диалектом языка CSS. Это позволяет быстро изучить LESS и, практически, сразу начать с ним работать, если же что-то вас не устроит – вы можете в любой момент вернуться к работе на «чистом»  CSS.

Что же это за переменные такие «непеременные»?

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

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

Результат:

#header { color: #6c94be; }

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

Примеси меня, примеси…

Примеси – способ включения (подмешивания) связки свойств из одного стилевого правила LESS в другое.
К примеру, мы имеем следующий класс:

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

И мы хотим (нам необходимо, нас заставляют, судьба мира в наших руках, …) использовать эти свойства внутри другого правила. Реализовать это наше желание или необходимость достаточно просто, для этого необходимо упомянуть имя класса .bordered внутри стилевых правил тех элементов (или правильней говорить селекторов?), которым необходимо передать свойства имеющиеся у .bordered. Это выглядит таким образом:

#menu a {
     color: #111;
     .bordered;
}

.post a {
     color: red;
     .bordered;
}

Свойства класса .bordered теперь будут наследованы как #menu a , так и .post a (Запомните, что вы так же можете использовать #id’шники в качестве примесей).

Вложи меня и делай все, что хочешь!

Я уже говорил, что LESS это чудесная штука?
Он просто заставляет нас писать код красиво благодаря такой возможности, как использование вложенных правил вместо/вместе с привычным каскадированием.   Например у нас имеется такой вот код на CSS:

#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}

В LESS мы можем переписать его следующим образом:

#header {
     color: black;
     .navigation {
          font-size: 12px;
     }
     .logo {
          width: 300px;
          :hover { text-decoration: none }
     }
}

В результате код стал короче, читабельней и понятней, а еще он несколько подражает структуре нашего html.

Операторы, операции, оперирование, опер…

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

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS отлично понимает, что от него хотят, когда пишут:

@var: 1px + 5;

и в результате мы получим: 6px.

Пространства имен и аксессоры

Иногда нам может потребоваться сгруппировать наши переменные или примеси в организационных целях и создать для них некоторое подобие инкапсуляции. В LESS это делается довольно просто. Допустим, мы хотим связать некоторые примеси и переменные чтобы в дальнейшем их повторно использовать или подмешивать, для этого нам понадобиться создать id #bundlе, который по сути будет являться пространством имен и аксессором для доступа к правилам и их свойствам:

#bundle {
     .button {
          display: block;
          border: 1px solid black;
          background-color: grey;
          :hover { background-color: white }
     }
     .tab { ... }
     .citation { ... }
}

Теперь, если нам понадобится подмешать класс .button в  #header, мы можем сделать это так:

#header a {
     color: orange;
     #bundle > .button; //используем аксессор
}

В данном случае #bundle является ни чем иным, как пространством имен которое реализуется благодаря такой отличительной черте LESS, как возможность создания вложенных правил, о которой уже говорилось выше. Пространства имен позволяют создавать несколько одноименных классов и определять из какого именно (из всех одноименных классов) необходимо наследовать свойства. LESS также позволяет вам получать доступ к определенным свойствам или переменным из другого установленного правила:

#defaults {
     @width: 960px;
     @color: black;
}

.article { color: #294366; }

.comment {
     width: #defaults[@width]; //используем аксессор
     color: .article['color']; //и здесь тоже
}

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

Область видимости: «видимки» и «невидимки»

То, что подразумевается под «Область видимости» в LESS очень похоже на область видимости в языках программирования. Переменные и примеси сначала ищутся локально, т.е. внутри текущего правила и если они не будут замечены в локальной области видимости, то компилятор будет искать их во всей иерархии  родительских областей  видимости, до первой обнаруженной примеси или переменной (смотря, что необходимо).

Запомните, что порядок определения переменных имеет значение. Пример:

@var: red;

#page {
     @var: white;
     #header {
          color: @var; // white
     }
}

В данном примере, если мы удалим определение переменной @var внутри #page, то свойство color у #header будет: red, поскольку переменная @var не будет найдена ни внутри #header, ни внутри #page, а только в корне всех правил, где она и содержит значение: red.  Если мы определим переменную @var: blue; внутри #header, то в итоге свойство color получит значение blue.

Ох уж эти комментарии

LESS позволяет использовать оба Си-подобных стиля комментирования кода и встроенные комментарии:

/* Язык до Киева доведет! */
@var: red;

// Однострочный комментарий
@var: white;

Кошерный импорт

Импортирование в LESS представляет собой больше, чем можно было бы ожидать. В файлы с LESS кодом мы можем импортировать как CSS файлы, так и другие LESS файлы. Причем, при импортировании .less файла, все переменные, содержащиеся в нем, будут нам доступны. Если файл имеет расширение .less, то расширение указывать при импортировании не обязательно:

@import «library»;
@import «typo.css»;

Ссылки по теме:

На этом все. Лучшая благодарность автору блога — ваши комментарии.