Използване на 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`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Типография

`@sansFontFamily`	„Helvetica Neue“, Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Монако, "Courier New", монопространство
`@baseFontSize`	13px	Трябва да са пиксели
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Трябва да са пиксели
`@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`	#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`	40px
`@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`	Задайте семейство шрифтове на serif и контролирайте размера, теглото и водещия
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Задайте семейство шрифтове на sans-serif и контролирайте размера, теглото и водещия
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Задайте фамилия шрифтове на monospace и контролирайте размера, теглото и водещия

Мрежова система

Миксин	Параметри	Използване
`.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`	Предотвратяване на трептене на съдържание при използване на CSS 3D трансформации
`.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 чрез някой от тези методи.

Инструменти за компилиране

Възел с makefile

Инсталирайте LESS компилатора на командния ред и uglify-js глобално с npm, като изпълните следната команда:

$ npm install -g less 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 mixins

Относно миксините

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

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

Лесно добавете свой собствен

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

Помощни програми

Форми

Типография

Мрежова система

CSS3 свойства

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

Компилиране на Bootstrap с LESS

Инструменти за компилиране

Възел с makefile

Командна линия

Javascript

Неофициално приложение за Mac

Още приложения за Mac

хрускам

CodeKit

Лесно