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

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

Почему МЕНЬШЕ?

В основе Bootstrap лежит LESS, динамический язык таблиц стилей, созданный нашим хорошим другом Алексисом Селье . Это делает разработку системного CSS быстрее, проще и веселее.

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

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

Учить больше

Посетите официальный сайт http://lesscss.org/ , чтобы узнать больше.

Переменные

Управление цветами и значениями пикселей в CSS может быть немного болезненным, обычно полным копированием и вставкой. Однако не с LESS — назначайте цвета или значения пикселей как переменные и изменяйте их один раз.

Миксины

Эти три объявления радиуса границы, которые вам нужно сделать в обычном старом CSS? Теперь они сократились до одной строки с помощью примесей, фрагментов кода, которые вы можете повторно использовать где угодно.

Операции

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

Леса и ссылки

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

Сеточная система

`@gridColumns`	12
`@gridColumnWidth`	60 пикселей
`@gridGutterWidth`	20 пикселей
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Типография

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, без засечек
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Монако, "Курьер Нью", моноширинный
`@baseFontSize`	13 пикселей	Должны быть пиксели
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 пикселей	Должны быть пиксели
`@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`	#еее
`@white`	#ффф

Акцентные цвета

`@blue`	#049cdb
`@green`	№ 46а546
`@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`	#3a87объявление
`@infoBackground`	#d9edf7

Навбар

`@navbarHeight`	40 пикселей
`@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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Герой

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

О миксинах

Основные миксины

Базовый миксин — это, по сути, включение или партиал фрагмента CSS. Они написаны так же, как класс CSS, и их можно вызывать где угодно.

. элемент {
  . ясное исправление ();
}

Параметрические миксины

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

. элемент {
  . граница - радиус ( 4px );
}

Легко добавляйте свои

Почти все миксины Bootstrap хранятся в mixins.less, прекрасном служебном файле .less, который позволяет вам использовать миксин в любом из файлов .less в наборе инструментов.

Итак, продолжайте и используйте существующие или не стесняйтесь добавлять свои собственные по мере необходимости.

Включенные миксины

Утилиты

Миксин	Параметры	Применение
`.clearfix()`	никто	Добавьте к любому родителю, чтобы очистить поплавки внутри
`.tab-focus()`	никто	Примените стиль фокуса Webkit и округлый контур Firefox
`.center-block()`	никто	Автоматическое центрирование блочного элемента с помощью`margin: auto`
`.ie7-inline-block()`	никто	Используйте в дополнение к обычному `display: inline-block`, чтобы получить поддержку IE7
`.size()`	`@height @width`	Быстро установить высоту и ширину в одной строке
`.square()`	`@size`	Основываясь на `.size()`том, чтобы установить ширину и высоту как одно и то же значение
`.opacity()`	`@opacity`	Установите целыми числами процент непрозрачности (например, «50» или «75»)

Формы

Миксин	Параметры	Применение
`.placeholder()`	`@color: @placeholderText`	Установите `placeholder`цвет текста для входов

Типография

Миксин	Параметры	Применение
`#font > #family > .serif()`	никто	Заставить элемент использовать стек шрифтов с засечками
`#font > #family > .sans-serif()`	никто	Заставьте элемент использовать стек шрифтов без засечек
`#font > #family > .monospace()`	никто	Заставьте элемент использовать моноширинный стек шрифтов
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Легко установить размер шрифта, вес и интерлиньяж
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Установите семейство шрифтов с засечками и управляйте размером, весом и интерлиньяжем.
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Установите семейство шрифтов без засечек и контролируйте размер, толщину и интерлиньяж.
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Установите семейство шрифтов на моноширинный и контролируйте размер, толщину и интерлиньяж.

Сеточная система

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

Свойства CSS3

Миксин	Параметры	Применение
`.border-radius()`	`@radius`	Скруглите углы элемента. Может быть одним значением или четырьмя значениями, разделенными пробелами.
`.box-shadow()`	`@shadow`	Добавьте тень к элементу
`.transition()`	`@transition`	Добавьте эффект перехода CSS3 (например, `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`	Изменить блочную модель для элемента (например, `border-box`для полной ширины `input`)
`.user-select()`	`@select`	Управление выделением курсором текста на странице
`.backface-visibility()`	`@visibility: visible`	Предотвращение мерцания содержимого при использовании 3D-преобразований CSS
`.resizable()`	`@direction: both`	Сделать любой элемент изменяемым по размеру справа и снизу
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Заставьте содержимое любого элемента использовать столбцы CSS3
`.hyphens()`	`@mode: auto`	Расстановка переносов CSS3, когда вы этого хотите (включает в себя `word-wrap: break-word`)

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

Миксин	Параметры	Применение
`#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 любым из этих способов.

Инструменты для компиляции

Узел с make-файлом

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

$ npm install -g меньше jshint углубление uglify-js

После установки просто запустите makeиз корня вашего каталога начальной загрузки, и все готово.

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

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

Установите инструмент командной строки LESS через 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.

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

Создано с помощью МЕНЬШЕ

Почему МЕНЬШЕ?

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

Учить больше

Переменные

Миксины

Операции

Переменные Bootstrap Переменные LESS, их значения и рекомендации по использованию

Леса и ссылки

Сеточная система

Типография

Столы

Цвета в оттенках серого

Акцентные цвета

Составные части

Кнопки

Формы

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

Навбар

Выпадающие списки

Герой

Bootstrap миксины

О миксинах

Основные миксины

Параметрические миксины

Легко добавляйте свои

Включенные миксины

Утилиты

Формы

Типография

Сеточная система

Свойства CSS3

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

Компиляция Bootstrap с LESS

Инструменты для компиляции

Узел с make-файлом

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

Javascript

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

Другие приложения для Mac

Хруст

КодКит

Простой