Використання 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`	#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

Навігаційна панель

`@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`

Одиниця героя

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

Про міксини

Базові міксини

Базовий міксин — це, по суті, включення або частина для фрагмента CSS. Вони написані так само, як клас CSS, і їх можна викликати будь-де.

. елемент {
  . clearfix ();
}

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

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

. елемент {
  . бордюр - радіус ( 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

Фони та градієнти

Міксин	Параметри	Використання
`#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 і uglify-js глобально за допомогою npm, виконавши таку команду:

$ npm install -g less uglify-js

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

Крім того, якщо у вас встановлено watchr , ви можете запустити make watchавтоматичне перебудування початкового завантаження кожного разу, коли ви редагуєте файл у бібліотеці початкового завантаження (це не обов’язково, лише зручний спосіб).

Командний рядок

Встановіть інструмент командного рядка 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, їхні значення та вказівки щодо використання

Риштування та ланки

Сітка системи

Типографіка

Таблиці

Кольори градацій сірого

Акцентні кольори

компоненти

кнопки

Форми

Формувати стани та оповіщення

Навігаційна панель

Випадаючі списки

Одиниця героя

Завантажувальні міксини

Про міксини

Базові міксини

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

Легко додайте свій власний

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

Комунальні послуги

Форми

Типографіка

Сітка системи

Властивості CSS3

Фони та градієнти

Компіляція Bootstrap з LESS

Інструменти для компіляції

Вузол із make-файлом

Командний рядок

Javascript

Неофіційний додаток для Mac

Більше програм для Mac

Хрускіт

CodeKit

Просто