CSS-препроцессор LESS и его интеграция с Ruby on Rails

LESS — новый препроцессор для CSS. Проще говоря, LESS позволяет использовать в вашем CSS-файле переменные, операторы, классы и вложенные конструкции. В этой статье вы узнаете об основных возможностях LESS и о том, как быстро подключить его к популярному фреймворку Ruby on Rails 3.



Если вы имеете хоть малейшее отношение к веб-разработке, то конечно вы знакомы с CSS — каскадными таблицами стилей. Язык описания CSS предельно прост, он представляет собой набор правил, в свою очередь, каждое правило состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений.

Такая простая структура CSS делает его доступным для начинающих, но в то же время накладывает некоторые ограничения. Например, невозможно использование переменных, а следовательно – неизбежны участки повторяющегося кода. Что противоречит принципам DRY (Don't Repeat Yourself – дословно, "не повторяй самого себя").

Что же представляет собой CSS-препроцессор LESS и как он позволит нам обойти несовершенство классического CSS-кода? LESS расширяет основные возможности CSS – позволяет использовать переменные и вычисления, добавляет некоторые принципы ООП и позволяет сделать структуру правил CSS более четкой.

Как это работает?


Вместо css-файла с таблицами стилей мы работаем с less-файлом. Т.е. оставляем "styles.css" в сторонке и создаем/открываем "styles.less", который по умолчанию должен быть в той же папке, что и ваши css-файлы. В HTML-документе ничего изменять не надо.

Перед тем, как веб-сервер будет отдавать зашедшему на сайт посетителю "styles.css" – LESS заменит его на скомпилированный из "styles.less" – и пользователь получит стандартную, написанную по всем правилам CSS таблицу стилей.

Установка для Ruby on Rails 3




Компилятор LESS доступен для интеграции в такие типы проектов как Ruby on Rails, PHP, .NET, приложение OS X. Существует и версия, написанная на JS. Мы же рассмотрим только установку под Ruby on Rails 3. Она предельно проста. Сначала устанавливаем ruby-гем:
gem install less

Затем плагин под рельсы:
rails plugin install git://github.com/cloudhead/more.git

Если ваши css-файлы хранятся не в дефолтной папке "public/stylesheets/" – то пропишите свои пути в "config/environment.rb", у меня это выглядит так:
Less::More.source_path = "public/css"
Less::More.destination_path = "css"

Вот в принципе и все.

Переменные


Использование переменных позволит вам заметно упростить разработку. Например, в случае работы с цветами:
@light-background-color: #cfdae1;

#menu a:hover { color: @light-background-color; }
#footer { background: @light-background-color; }

Операторы


Над переменными в LESS можно совершать любые арифметические действия, например:
@base-margin: 25px;
#header { margin-top: @base-margin + 10px; }

Или даже быстро изменять оттенки цветов:
@light-background-color: #cfdae1;
@dark-background-color: @light-background-color – #333;

Классы


Например, мы можем определить класс "rounded-corners", который будет отвечать за округление уголков:
.rounded-corners(radius) {
    -webkit-border-radius: radius;
    -moz-border-radius: radius;
    border-radius: radius;
}

И использовать его внутри любого селектора:
#login-box {
    .rounded-corners(5px);
}

Структура


Стандартный код, описывающий, например, меню сайта в CSS может выглядеть так:
#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

LESS позволяет располагать правила внутри других правил, благодаря чему вы сможете переписать указанный выше участок кода более красиво и логично:
#header {
  #nav {
    ul {
       li {
        a {}
      }
    }
  }
}

А вот так можно описать стандартные стили ссылок:
a {
    &:hover {}
    &:active {}
    &:visited {}
}

Последние штрихи


Вы можете подключать к основному less-файлу другие функцией "import":
import 'typography';
import 'print';

И делать комментарии в коде после пары слэшей:
#end {}
// спасибо за внимание
// надеюсь, тема вас заинтересовала

Благодарим справочник Вембо за помощь в написании статьи.
Поделиться публикацией

Комментарии 21

    +2
    Однозначно спасибо, в закладки!
      +8
      Если интересуют такие штуки, то есть еще Sass и <a href=«compass-style.org/>Compass. Первое — CSS-препроцессор, второе — Sass-фреймворк, дающие в паре много удовольствия =)
        0
        Чиорт, тег не закрыл. Вы уж меня извините, я только проснулся.
          0
          А какие инструменты предоставленные связкой sass+compass пригодились лично вам?
            +3
            Собственно, сам Sass (функции, переменные), готовые хаки для браузеров, и семантический Blueprint (периодически пользовал раньше в несемантическом виде), избавляющий от мусора в разметке. В доках можно найти еще полезные штуки. Да, все это можно делать руками на чистом CSS, но я предпочитаю иметь переменные, какие-то хелперы и хранить что-то в отдельных файлах, если это мне нужно, зная, что на выходе я получу всего лишь один CSS файл (уже сжатый, если нужно). Ну, и, субъективно, в связке с Haml получается вполне себе приятная верстка.
      +4
      LESS перестал иметь смысл после появления SCSS в Haml/Sass 3.

      Собственно, теперь сасс умеет все то же самое, что less, плюс еще дофига всего. Плюс compass.
        +4
        Я в руби не рублю, так что для меня лесс пока не идет лесом.
          –1
          Вся крутизна Less/Sass видна только в руби-приложениях. Там и модули дописывать можно и вообще дофига всего делать.

          А утилиты командной строки и там и сям есть. Так что юзать отдельно от руби можно. И опять же, Sass по всем фронтам мощнее и навороченнее.
            0
            А, я не заметил, что там еще под пхп с дотнетом какие-то порты есть. Так что беру свои слова назад. Если вы не рубист, вам Less.
              0
              SASS как gem может работать независимо от Rails/Rack, как отдельное ПО и для его использования не требуется знание Ruby. Лично я последний год вообще не использовал чистый CSS ни разу, после SASS (равно как и с HAML для HTML) это уже кажется жутко неудобным.
          0
          Под другие (не под руби) языки программирования Sass и Compass есть?
        +1
        Реализация под разные типы проектов впечатляет.
        Особенно интересно приложение для MacOsX.
        Спасибо за обзор.
          +2
          А для Python, Django есть подобное?
          0
          В Play Framework есть модуль SASS для (http://sass-lang.com/)
            –1
            А ещё LESS есть и в виде JS-интерпретатора (удобно использовать из node.js) — github.com/cloudhead/less.js/
              –1
              Less если честно не очень впечатлил, но вы меня мощно подтолкнули к haml + sass + compass))) спасибо!
                –1
                А как это дебажить? Файрбаг же не будет показывать строчку в лесс файле, а будет показывать в сгенерированном ксс.
                  0
                  Вот, где css-фреймворки — это добро. Можно инклудить их стили, а на выходе получать человеческие и идеологически правильные названия классов.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое