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

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

Почему LESS?

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

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

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

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

Посетите официальный сайт 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`	Основан на `.size()` для задания одинакового размера высоты и ширины
`.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 файлы и компилирует их после каждого изменения.

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

Разрабатывайте, используя LESS

Почему LESS?

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

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

Переменные

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

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

Переменные в Bootstrap LESS-переменные, значения и пояснения

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

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

Оформление и шрифты

Таблицы

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

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

Компоненты

Кнопки

Формы

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

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

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

Элемент Hero!

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

Подробнее о mixins

Основы mixins

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

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

Встроенные mixins

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

Формы

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

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

CSS3 свойства

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

Методы компиляции Bootstrap с использованием LESS

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

Через Node.js и makefile

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

Через Javascript

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

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

Crunch

CodeKit

Simpless