Използване на 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 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
@@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 Задайте семейство шрифтове на 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 колони
.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 чрез някой от тези методи.

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

Възел с makefile

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

$ npm install -g less jshint recess 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, CodeKit е приложение за Mac, което компилира LESS, SASS, Stylus и CoffeeScript.

Лесно

Приложение за Mac, Linux и PC за компилиране с плъзгане и пускане на LESS файлове. Освен това изходният код е на GitHub .