Pull to refresh

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

Reading time 3 min
Views 5.8K
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 {}
// спасибо за внимание
// надеюсь, тема вас заинтересовала

Благодарим справочник Вембо за помощь в написании статьи.
Tags:
Hubs:
+50
Comments 21
Comments Comments 21

Articles