Користење LESS со Bootstrap

Приспособете го и проширете го Bootstrap со LESS , CSS препроцесор, за да ги искористите предностите на променливите, миксините и повеќе што се користат за изградба на CSS на Bootstrap.

Зошто ПОМАЛКУ?

Bootstrap е направен со LESS во неговото јадро, динамичен јазик за стилски лист создаден од нашиот добар пријател, Алексис Селиер . Го прави развојот на CSS базиран на системи побрзо, полесно и позабавно.

Што е вклучено?

Како продолжување на CSS, LESS вклучува променливи, миксини за фрагменти од код што може да се користат повеќекратно, операции за едноставна математика, вгнездување, па дури и функции за боја.

Научи повеќе

ПОМАЛКУ CSS

Посетете ја официјалната веб-страница на http://lesscss.org/ за да дознаете повеќе.

Променливи

Управувањето со боите и вредностите на пиксели во CSS може да биде малку мачно, обично полно со копирање и залепување. Сепак, не со ПОМАЛКУ - доделете бои или вредности на пиксели како променливи и променете ги еднаш.

Мешавини

Оние три декларации за граничен радиус што треба да ги направите во редовниот 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, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Менло, Монако, „Courier New“, монопростор
@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 #ффф

Акцентни бои

@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

Navbar

@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. . појасни ();
  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() ниеден Направете елемент да користи стек на фонтови sans-serif
#font > #family > .monospace() ниеден Направете елемент да користи стек на фонтови 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 Поставете го семејството на фонтови на 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 преку кој било од овие методи.

Алатки за составување

Јазол со фајл

Инсталирајте го компајлерот на командната линија LESS, JSHint, Recess и uglify-js глобално со npm со извршување на следнава команда:

$ npm инсталирај -g помалку jshint вдлабнатина uglify-js

Откако ќе се инсталира, само стартувајте makeод коренот на директориумот за подигање и сè сте подготвени.

Дополнително, ако имате инсталирано Watchr , може да се кандидира make watchза автоматско обновување на bootstrap секој пат кога уредувате датотека во подигнувачката lib (ова не е потребно, само практичен метод).

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

Инсталирајте ја алатката за командната линија 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 е извонреден уредник и компајлер за ПОМАЛКУ, изграден на Adobe Air.

CodeKit

Создадена од истиот човек како и неофицијалната апликација за Mac, CodeKit е апликација за Mac која компајлира LESS, SASS, Stylus и CoffeeScript.

Едноставно

Апликација за Mac, Linux и PC за влечење и пушти компајлирање на ПОМАЛКУ датотеки. Плус, изворниот код е на GitHub .