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 таблицу стилей.
Компилятор LESS доступен для интеграции в такие типы проектов как Ruby on Rails, PHP, .NET, приложение OS X. Существует и версия, написанная на JS. Мы же рассмотрим только установку под Ruby on Rails 3. Она предельно проста. Сначала устанавливаем ruby-гем:
Затем плагин под рельсы:
Если ваши css-файлы хранятся не в дефолтной папке "public/stylesheets/" – то пропишите свои пути в "config/environment.rb", у меня это выглядит так:
Вот в принципе и все.
Использование переменных позволит вам заметно упростить разработку. Например, в случае работы с цветами:
Над переменными в LESS можно совершать любые арифметические действия, например:
Или даже быстро изменять оттенки цветов:
Например, мы можем определить класс "rounded-corners", который будет отвечать за округление уголков:
И использовать его внутри любого селектора:
Стандартный код, описывающий, например, меню сайта в CSS может выглядеть так:
LESS позволяет располагать правила внутри других правил, благодаря чему вы сможете переписать указанный выше участок кода более красиво и логично:
А вот так можно описать стандартные стили ссылок:
Вы можете подключать к основному less-файлу другие функцией "import":
И делать комментарии в коде после пары слэшей:
Благодарим справочник Вембо за помощь в написании статьи.
Если вы имеете хоть малейшее отношение к веб-разработке, то конечно вы знакомы с 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 {}
// спасибо за внимание
// надеюсь, тема вас заинтересовала
Благодарим справочник Вембо за помощь в написании статьи.