Baara kɛ ni LESS ye ni Bootstrap ye

Bootstrap bɛrɛbɛrɛ ani k’a janya ni LESS ye, n’o ye CSS preprocessor ye, walasa ka nafa sɔrɔ fɛn caman na, mixins ani fɛn wɛrɛw minnu bɛ kɛ ka Bootstrap ka CSS jɔ.

Mun na LESS?

Bootstrap dilannen don ni LESS ye a kɔnɔko la, n’o ye kan ye min bɛ se ka kɛ cogo la min bɛ se ka wuli ka bɔ a nɔ na, n’o ye an teri ɲuman ye, n’o ye Alexis Sellier ye . A bɛ CSS min sinsinnen bɛ sistɛmuw kan, o yiriwali teliya, ka nɔgɔya, ani ka diya.

Mun de bɛ o la?

I n’a fɔ CSS ka farankan, LESS bɛ fɛn caman sɛmɛntiya, mixins minnu bɛ se ka baara kɛ kokura ni kodew ye, baarakɛcogo minnu bɛ kɛ jatebɔ nɔgɔmanw kama, nesting, ani hali kulɛri baarakɛcogo.

Aw ye kunnafoni wɛrɛw sɔrɔ

Aw ye taa siti ofisiyali la http://lesscss.org/ walasa ka kunnafoni wɛrɛw sɔrɔ.

Yɛlɛma-yɛlɛmaw

Kulɛriw ni pixel nafaw ɲɛnabɔli CSS kɔnɔ bɛ se ka kɛ dimi ye dɔɔnin, a ka c’a la, a falen bɛ kopi ni nɔrɔ la. A tɛ kɛ ni LESS ye hali ni o ye a sɔrɔ—aw bɛ kulɛriw walima pixel nafaw di i n’a fɔ fɛn caman bɛrɛbɛrɛ ani k’u Changer siɲɛ kelen.

Mixinw (Mixins).

O dankan-radius declarations saba i ka kan ka kɛ regular ol' CSS kɔnɔ? Sisan u bɛ jigin ka se zana kelen ma ni mixins dɛmɛ ye, kode snippets i bɛ se ka baara kɛ ni minnu ye kokura yɔrɔ o yɔrɔ.

Baarakɛcogo minnu bɛ kɛ

Aw ye aw ka grid, leading, ani super flexible kɛ ka jatebɔ kɛ on the fly ni operations. I ka sira caya, ka tila, ka fara a kan, ka bɔ a la ka taa CSS hakili la.

Scaffolding ani ɲɔgɔndanw

`@bodyBackground`	`@white`	Page kɔkanna kulɛri
`@textColor`	`@grayDark`	Sɛbɛnni kulɛri dafalen farikolo bɛɛ, kuncɛw ani fɛn wɛrɛw kama
`@linkColor`	`#08c`	Default link sɛbɛnni kulɛri
`@linkColorHover`	`darken(@linkColor, 15%)`	Default link sɛbɛnni hover kulɛri

Grid sitɛmu

`@gridColumns`	12 ye
`@gridColumnWidth`	60px ye
`@gridGutterWidth`	20px ye
`@fluidGridColumnWidth`	6,382978723% ye .
`@fluidGridGutterWidth`	2,127659574% ye .

Typografi (Typografi) (Typographie).

`@sansFontFamily`	"Hɛlvetika Neue", Hɛlvetika, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier Nouveau", yɔrɔ kelen
`@baseFontSize`	13px ye	A ka kan ka kɛ pixelw ye
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px ye	A ka kan ka kɛ pixelw ye
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabali minnu bɛ yen

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Kulɛriw ye gris ye

`@black`	#000 ye
`@grayDarker`	#222
`@grayDark`	#333 ye
`@gray`	#555 ye
`@grayLight`	#999 ye
`@grayLighter`	#eee ye
`@white`	#fff ye

Accent kulɛriw

`@blue`	#049cdb ye
`@green`	#46a546 ye
`@red`	#9d261d ye
`@yellow`	#ffc40d ye
`@orange`	#f89406 ye
`@pink`	#c3325f ye
`@purple`	#7a43b6 ye

A yɔrɔw

Butɔnw

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

Sɛbɛnw

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Foroko jamanaw ni lasɔminiw

`@warningText`	#c09853 ye
`@warningBackground`	#f3edd2 ye
`@errorText`	#b94a48 ye
`@errorBackground`	#f2dede ye
`@successText`	#468847 ye
`@successBackground`	#dff0d8 ye
`@infoText`	#3a87ad ye
`@infoBackground`	#d9edf7 ye

Navbar ye

`@navbarHeight`	40px ye
`@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`

Dropdowns (Donkiliw).

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Unité de héros

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

Mixinw ko la

Mixin basigilenw

Mixin basigilen ye a jɔyɔrɔba ye include walima partial ye CSS yɔrɔ dɔ la. U sɛbɛnnen bɛ i n’a fɔ CSS kalansen ani u bɛ se ka wele yɔrɔ o yɔrɔ.

. eleman { ye .
  . ɲɛfɔli jɛlen ();
} ye .

Paramɛtiriw ka mixinw

Paramɛtiri mixin bɛ i n’a fɔ mixin basigilen dɔrɔn, nka a bɛ sɔn paramɛtiriw fana ma (o de y’a to a tɔgɔ in) ni nafa dafalenw ye minnu bɛ se ka sugandi.

. eleman { ye .
  . dankan - radiyali ( 4px );
} ye .

Aw bɛ aw yɛrɛ ta fara a kan nɔgɔya la

Bootstrap ka mixinw bɛɛ bɛ Se ka Lakodɔn mixins.less kɔnɔ, o ye .less file nafamaba ye min b’a To i bɛ se ka mixin dɔ Kɛ .less filew dɔ la kelen na baarakɛminɛnw kɔnɔ.

O la, taa ɲɛ ka baara kɛ ni minnu bɛ yen walima aw kana siga ka aw yɛrɛ ta fara a kan i mago bɛ cogo min na.

Mixinw bɛ sɔrɔ a kɔnɔ

Nafamafɛnw

Mixin (Mixin) ye	Paramɛtɛrɛw	Baarakɛcogo
`.clearfix()`	foɲisi	Aw bɛ fara bangebaga o bangebaga kan walasa ka flotw jɛya a kɔnɔ
`.tab-focus()`	foɲisi	Webkit focus style ani Firefox outline lamininenw waleya
`.center-block()`	foɲisi	Auto center a bloki-nivo element baara`margin: auto`
`.ie7-inline-block()`	foɲisi	Baara kɛ ka fara a kan tuma bɛɛ `display: inline-block`walasa ka IE7 dɛmɛ sɔrɔ
`.size()`	`@height @width`	Aw bɛ teliya ka a janya ni a bonya sigi tigɛli kelen kan
`.square()`	`@size`	A bɛ jɔ `.size()`ka bonya ni janya sigi i n’a fɔ nafa kelen
`.opacity()`	`@opacity`	Aw bɛ, jateden dafalenw na, opacity kɛmɛsarada la (misali la, "50" walima "75") sigi.

Sɛbɛnw

Mixin (Mixin) ye	Paramɛtɛrɛw	Baarakɛcogo
`.placeholder()`	`@color: @placeholderText`	Sɛbɛnni kulɛri sigi sen `placeholder`kan dontaw kama

Typografi (Typografi) (Typographie).

Mixin (Mixin) ye	Paramɛtɛrɛw	Baarakɛcogo
`#font > #family > .serif()`	foɲisi	Aw bɛ element dɔ kɛ ni serif font stack ye
`#font > #family > .sans-serif()`	foɲisi	A’ ye element dɔ Kɛ ni sans-serif font stack ye
`#font > #family > .monospace()`	foɲisi	Aw bɛ fɛn dɔ Kɛ ni monospace font stack ye
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Aw bɛ sɛbɛnnibolo hakɛ, a girinya ani a ɲɛminɛcogo sigi nɔgɔya la
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Aw bɛ sɛbɛnni denbaya sigi serif la, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Sɛbɛnni denbaya sigi sans-serif la, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Sɛbɛnni denbaya sigi yɔrɔ kelen na, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi

Grid sitɛmu

Mixin (Mixin) ye	Paramɛtɛrɛw	Baarakɛcogo
`.container-fixed()`	foɲisi	Aw bɛ minɛn dɔ dilan min bɛ cɛmancɛ la tilennen na walasa k’aw ka kɔnɔkow minɛ
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Pixel grid system (minɛn, jiri, ani kuluw) labɛn ni kulu n ye ani x pixel wide gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Aw bɛ kɛmɛsarada la grid system (jatebɔlan) dɔ labɛn ni n kolomaw ye ani x % jibolisiraw bonya
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Pixel grid system (pixel grid system) labɛn `input`fɛnw kama, jatebɔ kɛli padding ani dancɛw kan
`.makeColumn`	`@columns: 1, @offset: 0`	Aw bɛ fɛn o fɛn `div`tigɛli kɛ ka kɛ jatebɔlan ye ni `.span*`kalanw tɛ

CSS3 ka nafolomafɛnw

Mixin (Mixin) ye	Paramɛtɛrɛw	Baarakɛcogo
`.border-radius()`	`@radius`	Aw bɛ fɛn dɔ nɔngɔnw lamini. A bɛ se ka kɛ nafa kelen ye walima nafa naani minnu bɛ danfara la yɔrɔ la
`.box-shadow()`	`@shadow`	Aw bɛ drop shadow dɔ fara element dɔ kan
`.transition()`	`@transition`	CSS3 wulicogo nɔ fara a kan (misali la, `all .2s linear`) .
`.rotate()`	`@degrees`	Aw bɛ fɛn dɔ wuli ni degere n ye
`.scale()`	`@ratio`	Aw bɛ fɛn dɔ sɛgɛsɛgɛ ka se a bonya fɔlɔ siɲɛ n ma
`.translate()`	`@x, @y`	Aw bɛ fɛn dɔ lamaga x ni y planw kan
`.background-clip()`	`@clip`	Fɛn dɔ kɔkanna tigɛ (nafa bɛ min na `border-radius`) .
`.background-size()`	`@size`	Ja minnu bɛ kɔfɛ, olu bonya kɔlɔsi CSS3 fɛ
`.box-sizing()`	`@boxmodel`	Aw bɛ kɛsu modɛli Changer ka ɲɛsin element dɔ ma (misali la, `border-box`ka ɲɛsin full-width `input`ma ) .
`.user-select()`	`@select`	Sɛbɛnni minnu bɛ ɲɛ dɔ kan, olu sugandili ni cursor ye
`.backface-visibility()`	`@visibility: visible`	Aw bɛ kɔnɔkow flickering bali ni aw bɛ baara kɛ ni CSS 3D fɛn caman tigɛli ye
`.resizable()`	`@direction: both`	Aw bɛ fɛn o fɛn kɛ a bonya bɛ se ka wuli kinin fɛ ani duguma
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Aw bɛ fɛn o fɛn kɔnɔkow kɛ ka baara kɛ ni CSS3 kuluw ye
`.hyphens()`	`@mode: auto`	CSS3 hyphenation waati min na i b'a fɛ (a bɛ sɔrɔ a kɔnɔ `word-wrap: break-word`) .

Backgrounds ani gradients

Mixin (Mixin) ye	Paramɛtɛrɛw	Baarakɛcogo
`#translucent > .background()`	`@color: @white, @alpha: 1`	Aw bɛ fɛn dɔ di ni kɔkanna kulɛri ye min bɛ yeelen bɔ
`#translucent > .border()`	`@color: @white, @alpha: 1`	Aw bɛ danyɔrɔ kulɛri translucide di element dɔ ma
`#gradient > .vertical()`	`@startColor, @endColor`	A’ ye cross-browser vertical background gradient dɔ dabɔ
`#gradient > .horizontal()`	`@startColor, @endColor`	A’ ye cross-browser horizontal background gradient dɔ dabɔ
`#gradient > .directional()`	`@startColor, @endColor, @deg`	A’ ye cross-browser ɲɛminɛcogo kɔkanna sɛgɛsɛgɛli dɔ da
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Aw bɛ cross-browser dɔ dabɔ min ɲɛ saba ye kɔkanna gradient ye
`#gradient > .radial()`	`@innerColor, @outerColor`	Aw bɛ cross-browser radial kɔkanna gradient dɔ da
`#gradient > .striped()`	`@color, @angle`	A’ ye cross-browser striped background gradient dɔ dabɔ
`#gradientBar()`	`@primaryColor, @secondaryColor`	A bɛ baara kɛ ni butɔni ye walasa ka dancɛ dɔ di min bɛ se ka wuli ka bɔ a nɔ na ani min ka di dɔɔnin

Kɔlɔsili: N’i bɛ samali ɲinini dɔ ci GitHub ma ni CSS sɛmɛntiyalen ye, i ka kan ka CSS lajɛ kokura nin fɛɛrɛ ninnu dɔ la kelen fɛ.

Baarakɛminɛn minnu bɛ kɛ ka fɛnw lajɛ ɲɔgɔn fɛ

Node ni makefile ye

LESS cikan-sɛbɛnni-minɛn, JSHint, Recess, ani uglify-js sigi diɲɛ kɔnɔ ni npm ye ni nin cikan in kɛli ye:

$ npm install -g ka dɔgɔ jshint recess uglify-js

Ni a sigilen don dɔrɔn i bɛ boli makeka bɔ i ka bootstrap directory ju la ani i bɛɛ bɛ labɛn.

O tɛmɛnen 'kɔ, n'i ye watchr Sìgi sen kan, i bɛ Se ka boli make watchka bootstrap jɔ kokura a yɛrɛma tuma o tuma n'i ye dosiye dɔ Labɛn bootstrap lib kɔnɔ (o tɛ wajibi ye, nɔgɔya fɛɛrɛ dɔrɔn de ye).

Cikan sɛrɛkili

LESS cikan-sɛbɛnni baarakɛminɛn in sigi Node fɛ ani ka nin cikan in kɛ:

$ lessc ./less/bootstrap.less > kafoɲɔgɔnya.css

Aw ye aw jija ka don --compresso cikan kɔnɔ ni aw b’a ɲini ka bayt dɔw mara!

Javascript ye

Less.js labanw telesarse ani ka sira don a la (ani Bootstrap) <head>.

<link rel = "stylesheet/less" href = "/sira/ka taa/bootstrap.less" > <script src = "/sira/ka taa/ka dɔgɔ.js" </script>

Walasa ka .less filew lajɛ kokura, i k’u mara dɔrɔn k’i ka ɲɛ in doni kokura. Less.js b’u Lajɛ k’u Lakodɔn sigida marayɔrɔ la.

Mac app min tɛ ofisi ye

Mac app min tɛ ofisi ye, o bɛ .less filew ka ɲɛbilasɛbɛnw lajɛ ani ka kode lajɛ ka kɛ sigida filew ye .less file kɔlɔsilen maralen kɔfɛ.

N’i b’a fɛ, i bɛ se ka fɛɛrɛw tigɛli kɛ appli kɔnɔ walasa ka automatique minifying ani directory min kɔnɔ, files compilés bɛ laban ka kɛ.

A jɔra ni LESS ye

Mun na LESS?

Mun de bɛ o la?

Aw ye kunnafoni wɛrɛw sɔrɔ

Yɛlɛma-yɛlɛmaw

Mixinw (Mixins).

Baarakɛcogo minnu bɛ kɛ

Bootstrap variables LESS variables, u nafaw, ani baarakɛcogo ɲɛfɔli

Scaffolding ani ɲɔgɔndanw

Grid sitɛmu

Typografi (Typografi) (Typographie).

Tabali minnu bɛ yen

Kulɛriw ye gris ye

Accent kulɛriw

A yɔrɔw

Butɔnw

Sɛbɛnw

Foroko jamanaw ni lasɔminiw

Navbar ye

Dropdowns (Donkiliw).

Unité de héros

Bootstrap ka mixinw

Mixinw ko la

Mixin basigilenw

Paramɛtiriw ka mixinw

Aw bɛ aw yɛrɛ ta fara a kan nɔgɔya la

Mixinw bɛ sɔrɔ a kɔnɔ

Nafamafɛnw

Sɛbɛnw

Typografi (Typografi) (Typographie).

Grid sitɛmu

CSS3 ka nafolomafɛnw

Backgrounds ani gradients

Bootstrap labɛnni ni LESS ye

Baarakɛminɛn minnu bɛ kɛ ka fɛnw lajɛ ɲɔgɔn fɛ

Node ni makefile ye

Cikan sɛrɛkili

Javascript ye

Mac app min tɛ ofisi ye

Mac porogaramu wɛrɛw

Crunch (kɛrɛnkɛrɛnnenya la).

KodeKit ye

Simple tɛ min na