Использование LESS с Bootstrap
Настройте и расширьте Bootstrap с помощью LESS , препроцессора CSS, чтобы воспользоваться преимуществами переменных, миксинов и многого другого, используемых для создания CSS Bootstrap.
Создано с помощью МЕНЬШЕ
Почему МЕНЬШЕ?
В основе Bootstrap лежит LESS, динамический язык таблиц стилей, созданный нашим хорошим другом Алексисом Селье . Это делает разработку системного CSS быстрее, проще и веселее.
Что включено?
Как расширение CSS, LESS включает в себя переменные, примеси для повторного использования фрагментов кода, операции для простых математических операций, вложенность и даже цветовые функции.
Переменные
Управление цветами и значениями пикселей в CSS может быть немного болезненным, обычно полным копированием и вставкой. Однако не с LESS — назначайте цвета или значения пикселей как переменные и изменяйте их один раз.
Миксины
Эти три объявления радиуса границы, которые вам нужно сделать в обычном старом CSS? Теперь они сократились до одной строки с помощью примесей, фрагментов кода, которые вы можете повторно использовать где угодно.
Операции
Сделайте свою сетку, интерлиньяж и более гибкой, выполняя математические операции на лету. Умножайте, делите, складывайте и вычитайте свой путь к здравомыслию CSS.
Переменные Bootstrap Переменные LESS, их значения и рекомендации по использованию
Гиперссылки
@linkColor |
#08c | Цвет текста ссылки по умолчанию | |
@linkColorHover |
darken(@linkColor, 15%) |
Цвет при наведении текста ссылки по умолчанию |
Сеточная система
@gridColumns |
12 |
@gridColumnWidth |
60 пикселей |
@gridGutterWidth |
20 пикселей |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2,127659574% |
Типография
@baseFontSize |
13 пикселей |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 пикселей |
Цвета в оттенках серого
@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 |
Составные части
Кнопки
@primaryButtonBackground |
@linkColor |
Формы
@placeholderText |
@grayLight |
Навбар
@navbarHeight |
40 пикселей | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Состояния форм и оповещения
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
№468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87объявление | |
@infoBackground |
#d9edf7 |
Bootstrap миксины
О миксинах
Основные миксины
Базовый миксин — это, по сути, включение или партиал фрагмента 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: 5px, @width: 5px |
Быстро установить высоту и ширину в одной строке |
.square() |
@size: 5px |
Основываясь на .size()том, чтобы установить ширину и высоту как одно и то же значение |
.opacity() |
@opacity: 100 |
Установите целыми числами процент непрозрачности (например, «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 % |
Свойства CSS3
| Миксин | Параметры | Применение |
|---|---|---|
.border-radius() |
@radius: 5px |
Скруглите углы элемента. Может быть одним значением или четырьмя значениями, разделенными пробелами. |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Добавьте тень к элементу |
.transition() |
@transition |
Добавьте эффект перехода CSS3 (например, all .2s linear) |
.rotate() |
@degrees |
Повернуть элемент на n градусов |
.scale() |
@ratio |
Масштабировать элемент в n раз по сравнению с исходным размером |
.translate() |
@x: 0, @y: 0 |
Переместить элемент в плоскостях x и y |
.background-clip() |
@clip |
Обрезать фон элемента (полезно для border-radius) |
.background-size() |
@size |
Контролируйте размер фоновых изображений с помощью CSS3 |
.box-sizing() |
@boxmodel |
Изменить блочную модель для элемента (например, border-boxдля полной ширины input) |
.user-select() |
@select |
Управление выделением курсором текста на странице |
.resizable() |
@direction: both |
Сделать любой элемент изменяемым по размеру справа и снизу |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Заставьте содержимое любого элемента использовать столбцы CSS3 |
Фоны и градиенты
| Миксин | Параметры | Применение |
|---|---|---|
#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 |
Используется для кнопок, чтобы назначить градиент и немного более темную границу |
Компиляция Bootstrap с LESS
Инструменты для компиляции
Узел с make-файлом
Установите компилятор командной строки LESS и uglify-js глобально с помощью npm, выполнив следующую команду:
$ npm install -g меньше uglify-js
После установки просто запустите makeиз корня вашего каталога начальной загрузки, и все готово.
Кроме того, если у вас установлен watchr , вы можете запустить make watchавтоматическую пересборку bootstrap каждый раз, когда вы редактируете файл в библиотеке bootstrap (это не обязательно, просто способ удобства).
Командная строка
Установите инструмент командной строки LESS через Node и выполните следующую команду:
$lessc ./lib/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 .