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

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

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

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

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

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

Учить больше

МЕНЬШЕ CSS

Посетите официальный сайт 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, и их можно вызывать где угодно.

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

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

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

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

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

Почти все миксины 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.

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

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

Хруст

Crunch — это великолепный LESS-редактор и компилятор, созданный на основе Adobe Air.

КодКит

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

Простой

Приложение для Mac, Linux и ПК для перетаскивания файлов LESS. Плюс исходный код есть на GitHub .