Використання 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 #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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Про міксини

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

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

  1. . елемент {
  2. . clearfix ();
  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 less jshint recess 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.

Якщо хочете, ви можете перемикати параметри в додатку для автоматичного скорочення та те, у який каталог потрапляють скомпільовані файли.

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

Хрускіт

Crunch — чудовий редактор і компілятор LESS, створений на основі Adobe Air.

CodeKit

Створений тим же хлопцем, що й неофіційний додаток для Mac, CodeKit — це додаток для Mac, який компілює LESS, SASS, Stylus і CoffeeScript.

Просто

Програма Mac, Linux і ПК для компіляції LESS файлів методом перетягування. Крім того, вихідний код знаходиться на GitHub .