Использование LESS в Bootstrap

Изменяйте Bootstrap с помощью LESS, less это CSS-препроцессор, который позволяет использовать переменные, функции, операции и еще много приятного для работы с Bootstrap CSS.

Почему LESS?

Изначально Bootstrap был разработан с использованием LESS, LESS это динамический язык для создания каскадных таблицей стиля созданных нашим хорошим другом, Алексисом Селлиером (Alexis Sellier). Это позволило сделать разработку CSS более быстрой, простой и веселой.

Что включено?

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

Как узнать больше?

LESS CSS

Посетите официальный сайт http://lesscss.org (англ.) или Русскую версию сайта на http://lesscss.ru.

Переменные

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

Примешивания (mixins)

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

Функции и операции

Встречаются ли в ваших таблицах стилей элементы, пропорциональные другим элементам? Операции позволяют увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами. Функции используются точь-в-точь как в JavaScript-коде, позволяя манипулировать значениями так, как Вам угодно.

Шаблон и ссылки

@bodyBackground @white Основной фон страницы
@textColor @grayDark Основной свет текста, заголовков и т.п.
@linkColor #08c Цвет ссылки по умолчанию
@linkColorHover darken(@linkColor, 15%) Основной цвет ссылки при получении фокуса

Сетка шаблона

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Типография и шрифты

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px Значение должно быть в пикселях
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Значение должно быть в пикселях
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Таблицы

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

Черно-белая палитра

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff

Цветная палитра

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Компоненты

Кнопки

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

Формы

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

Состояния форм и сообщения

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Навигация (Navbar)

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

Выпадающий список

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor

Элемент Hero!

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Подробнее о mixins

Основы mixins

Примешивания по умолчанию включают в себя код с CSS-условиями.Они выглядят как обычный CSS класс и могут вызваны откуда угодно.

.element {
  .clearfix();
}

Mixins с параметрами

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

.element {
  .border-radius(4px);
}

Добавляйте свои примешивания

Все примешивания хранятся в файле mixins.less.

В этот файл Вы можете добавить необходимые Вам примешивания, либо создать свой файл.

Встроенные mixins

Вспомогательные

Mixin Параметры Использование
.clearfix() Нет Добавьте к родительскому элементу для удаления правила float
.tab-focus() Нет Применяет стили фокуса от Webkit и закругление элементов в Firefox
.center-block() Нет Отцентрованный block-элемент, используется margin: auto
.ie7-inline-block() Нет Исправляет display: inline-block в IE7
.size() @height @width Устанавливает высоту и ширину строки
.square() @size Builds on .size() to set the width and height as same value
.opacity() @opacity Устанавливает прозрачность элемента в процентах

Формы

Mixin Параметры Использование
.placeholder() @color: @placeholderText Устанавливает правила цвета для атрибута placeholder

Типография и шрифты

Mixin Параметры Использование
#font > #family > .serif() Нет Элемент использует стек шрифта serif
#font > #family > .sans-serif() Нет Элемент использует стек шрифта sans-serif
#font > #family > .monospace() Нет Элемент использует стек шрифта monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Устанавливает размер, жирность и высоту строки
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Устанавливает шрифт serif, размер, жирность и высоту строки
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Устанавливает шрифт sans-serif, размер, жирность и высоту строки
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Устанавливает шрифт monospace, размер, жирность и высоту строки

Сетка шаблона

Mixin Параметры Использование
.container-fixed() Нет Создает горизонтально отцентрованный элемент-контейнер для контента
#grid > .core() @gridColumnWidth, @gridGutterWidth Генерирует пиксельную сетку (container, row и columns) с n колоннами и x шириной отступа
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Генерирует процентную сетку с n колоннами и x % ширины отступа
#grid > .input() @gridColumnWidth, @gridGutterWidth Генерирует пиксельную сетку для элементов input, с учетом отступов и границ
.makeColumn @columns: 1, @offset: 0 Превращает любой div в колонну без использования классов .span*

CSS3 свойства

Mixin Параметры Использование
.border-radius() @radius Создает закругление углов элемента. Можно передавать одно значение или четыре для каждого угла.
.box-shadow() @shadow Добавляет тень к элементу
.transition() @transition Добавляет эффекты CSS3 transition (например, all .2s linear)
.rotate() @degrees Поворачивает элемент на n градусов
.scale() @ratio Масштабирует (увеличивает) элемент в n раз от оригинального размера
.translate() @x, @y Двигает элемент на x и y пикселей от исходного положения
.background-clip() @clip Обрезает фон элемента (полезно при использовании border-radius)
.background-size() @size Контролирует размер фоновой картинки через CSS3
.box-sizing() @boxmodel Изменяет модель Box-элемента (пример: border-box для полной ширины input)
.user-select() @select Контролирует цвет фона при выделении текста пользователем
.backface-visibility() @visibility: visible Исключает мерцание при использовании CSS 3D transforms
.resizable() @direction: both Делает размер любого элемента изменяемым вниз и вправо
.content-columns() @columnCount, @columnGap: @gridGutterWidth Применяет CSS3 columns к контенту любого элемента

Фон и градиенты

Mixin (Примешивания) Параметры Использование
#translucent > .background() @color: @white, @alpha: 1 Задает полупрозрачный фон элементу
#translucent > .border() @color: @white, @alpha: 1 Задает полупрозрачную границу элементу
#gradient > .vertical() @startColor, @endColor Создает кросс-браузерный вертикальный фоновый градиент
#gradient > .horizontal() @startColor, @endColor Создает кросс-браузерный горизонтальный фоновый градиент
#gradient > .directional() @startColor, @endColor, @deg Создает кросс-браузерный фоновый градиент под заданным углом
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Создает кросс-браузерный фоновый трех-цветный градиент
#gradient > .radial() @innerColor, @outerColor Создает кросс-браузерный радиальный фоновый градиент
#gradient > .striped() @color, @angle Создает кросс-браузерный полосатый фоновый градиент
#gradientBar() @primaryColor, @secondaryColor Используется для кнопок, задает градиент и тоненькую темную границу
Замечание: При отправке в GitHub с модифицированным CSS, Вы обязаны перекомпилировать CSS, с помощью одного из нижеуказанных методов.

Способы компиляции

Через Node.js и makefile

Установите LESS-компилятор и uglify-js глобально с npm путем запуска следующей команды:

$ npm install -g less uglify-js

После установки запустите make из под root-пользователя директории с bootstrap.

Дополнительно, если у Вас установлен watchr Вы можете запустить make watch для автоматического ребилдинга каждый раз после редактирования файла в библиотеке bootstrap (Это не обязательно, просто удобный метод).

Командная строка

Установите LESS command line tool через Node и запустите следующую команду:

$ lessc ./less/bootstrap.less > bootstrap.css

Не забудьте добавить --compress в команду если вы экономите байты!

Через Javascript

Скачайте последний Less.js и добавьте его в свой Bootstrap-проект в тег <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Для перекомпиляции .less файлов, просто сохраните их и перезагрузите страницу. Less.js автоматически компилирует на лету и загружает файлы в локальное хранилище.

Неофициальное приложение для Mac

Неофициальное приложение для Mac следит за директориями содержащими .less файлы и компилирует их после каждого изменения.

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

Еще приложения для Mac

Crunch

Crunch - хороший редактор и компилятор LESS файлов работает на Adobe Air.

CodeKit

Созданный тем же самым парнем что и не официальное приложение для Mac, CodeKit это приложение для Mac которое компилирует LESS, SASS, Stylus и CoffeeScript файлы.

Simpless

Приложение для Mac, Linux и PC работает по принципу drag and drop, компилирует LESS файлы. В дополнение имеет открытый код на GitHub.