Kugwiritsa ntchito LESS ndi Bootstrap

Sinthani Mwamakonda Anu ndikukulitsa Bootstrap ndi LESS , CSS preprocessor, kuti mutengere mwayi pazosintha, zosakaniza, ndi zina zomwe zimagwiritsidwa ntchito pomanga CSS ya Bootstrap.

Chifukwa chiyani ZOCHEPA?

Bootstrap imapangidwa ndi LESS pachimake, chilankhulo chosinthika chamitundu yopangidwa ndi bwenzi lathu lapamtima, Alexis Sellier . Zimapangitsa kupanga CSS yokhazikika pamakina mwachangu, kosavuta, komanso kosangalatsa.

Zomwe zikuphatikizidwa?

Monga chowonjezera cha CSS, LESS imaphatikizapo zosinthika, zosakaniza za ma code osinthika, magwiridwe antchito a masamu osavuta, zisa, ngakhale mitundu.

Dziwani zambiri

Pitani patsamba lovomerezeka pa http://lesscss.org/ kuti mudziwe zambiri.

Zosintha

Kuwongolera mitundu ndi ma pixel mu CSS kumatha kukhala kowawa pang'ono, nthawi zambiri kumadzaza ndi kukopera ndi kumata. Osati ndi LESS ngakhale-perekani mitundu kapena ma pixel ngati zosinthika ndikusintha kamodzi.

Zosakaniza

Zolengeza zitatu zomwe muyenera kuzipanga mu CSS nthawi zonse? Tsopano atsikira pamzere umodzi mothandizidwa ndi ma mixins, zidule zamakhodi omwe mungagwiritsenso ntchito kulikonse.

Zochita

Pangani gululi yanu, yotsogola, komanso yosinthika kwambiri pochita masamu pakuwuluka ndi ntchito. Chulukitsani, gawani, onjezani, ndi kuchotsa njira yanu ku CSS mwanzeru.

Masamba ndi maulalo

`@bodyBackground`	`@white`	Mtundu wakumbuyo watsamba
`@textColor`	`@grayDark`	Mtundu wofikira wa mawu a thupi lonse, mitu, ndi zina
`@linkColor`	`#08c`	Mtundu wa mawu a ulalo wofikira
`@linkColorHover`	`darken(@linkColor, 15%)`	Ulalo wofikira mtundu wa hover ya mawu

Grid system

`@gridColumns`	12
`@gridColumnWidth`	60px pa
`@gridGutterWidth`	20px pa
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Kujambula

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px pa	Ayenera kukhala ma pixel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px pa	Ayenera kukhala ma pixel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Matebulo

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

Mitundu ya Grayscale

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

Mitundu ya mawu

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

Zigawo

Mabatani

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

Mafomu

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

Ma fomu ndi zidziwitso

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

Navbar

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

Zotsitsa

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

Hero unit

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

Za zosakaniza

Zosakaniza zoyambira

Kusakaniza kofunikira kumaphatikizaponso kuphatikizirapo kapena pang'ono pazachidule za CSS. Amalembedwa ngati kalasi ya CSS ndipo amatha kutchedwa kulikonse.

. chinthu {
  . clearfix ();
}

Zosakaniza za Parametric

Kusakaniza kwa parametric kuli ngati mixin yoyambira, koma imavomerezanso magawo (chifukwa chake dzina) yokhala ndi zosankha zosasinthika.

. chinthu {
  . malire - utali wozungulira ( 4px );
}

Onjezani zanu mosavuta

Pafupifupi zosakaniza zonse za Bootstrap zimasungidwa mu mixins.less, ntchito yodabwitsa .fayilo yocheperako yomwe imakuthandizani kuti mugwiritse ntchito mixin mu fayilo iliyonse ya .less mu toolkit.

Chifukwa chake, pitilizani kugwiritsa ntchito zomwe zilipo kale kapena omasuka kuwonjezera zanu momwe mukufunira.

Kuphatikizapo zosakaniza

Zothandizira

Sakanizani	Parameters	Kugwiritsa ntchito
`.clearfix()`	palibe	Onjezani kwa kholo lililonse kuti muchotse zoyandama mkati
`.tab-focus()`	palibe	Ikani mawonekedwe a Webkit ndikuzungulira Firefox
`.center-block()`	palibe	Auto pakati pa block-level element pogwiritsa ntchito`margin: auto`
`.ie7-inline-block()`	palibe	Gwiritsani ntchito kuphatikiza pafupipafupi `display: inline-block`kuti mupeze thandizo la IE7
`.size()`	`@height @width`	Mwachangu ikani kutalika ndi m'lifupi pamzere umodzi
`.square()`	`@size`	Amamanga `.size()`kuti akhazikitse m'lifupi ndi kutalika ngati mtengo womwewo
`.opacity()`	`@opacity`	Khazikitsani, mu manambala athunthu, kuchuluka kwa kuwala (monga "50" kapena "75")

Mafomu

Sakanizani	Parameters	Kugwiritsa ntchito
`.placeholder()`	`@color: @placeholderText`	Khazikitsani `placeholder`mtundu wa mawu pazolowetsa

Kujambula

Sakanizani	Parameters	Kugwiritsa ntchito
`#font > #family > .serif()`	palibe	Pangani chinthu pogwiritsa ntchito stack ya serif
`#font > #family > .sans-serif()`	palibe	Pangani chinthu gwiritsani ntchito stack ya sans-serif
`#font > #family > .monospace()`	palibe	Pangani chinthu pogwiritsa ntchito stack monospace font
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Khazikitsani kukula kwa zilembo mosavuta, kulemera kwake, ndi kutsogolera
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Khazikitsani banja la fonti kukhala serif, ndikuwongolera kukula, kulemera, ndi kutsogolera
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Khazikitsani banja la fonti kukhala sans-serif, ndikuwongolera kukula, kulemera, ndi kutsogolera
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Khazikitsani banja la fonti kukhala monospace, ndikuwongolera kukula, kulemera, ndi kutsogolera

Grid system

Sakanizani	Parameters	Kugwiritsa ntchito
`.container-fixed()`	palibe	Pangani chidebe choyang'ana pakati kuti musunge zomwe muli nazo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Pangani dongosolo la gridi ya pixel (chotengera, mizere, ndi mizati) yokhala ndi n mizati ndi ngalande za x pixel wide
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Pangani gawo la gridi peresenti yokhala ndi n mizati ndi x % ngalande yotakata
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Pangani dongosolo la gridi ya pixel `input`pazinthu, kuwerengera padding ndi malire
`.makeColumn`	`@columns: 1, @offset: 0`	Sinthani chilichonse `div`kukhala gawo la grid popanda `.span*`makalasi

Zithunzi za CSS3

Sakanizani	Parameters	Kugwiritsa ntchito
`.border-radius()`	`@radius`	Kuzungulira ngodya za chinthu. Itha kukhala mtengo umodzi kapena magawo anayi olekanitsa malo
`.box-shadow()`	`@shadow`	Onjezani mthunzi wotsitsa ku chinthu
`.transition()`	`@transition`	Onjezani kusintha kwa CSS3 (mwachitsanzo, `all .2s linear`)
`.rotate()`	`@degrees`	Sinthani ma element n madigiri
`.scale()`	`@ratio`	Onjezani chinthu ku n kuchulukitsa kukula kwake koyambirira
`.translate()`	`@x, @y`	Sunthani chinthu pa ndege za x ndi y
`.background-clip()`	`@clip`	Dulani maziko a chinthu (chothandiza `border-radius`)
`.background-size()`	`@size`	Sinthani kukula kwazithunzi zakumbuyo kudzera pa CSS3
`.box-sizing()`	`@boxmodel`	Sinthani bokosi lachitsanzo cha chinthu (monga `border-box`kukula kwathunthu `input`)
`.user-select()`	`@select`	Sinthani kusankha kwa cholozera patsamba
`.backface-visibility()`	`@visibility: visible`	Pewani kusuntha kwa zinthu mukamagwiritsa ntchito CSS 3D kusintha
`.resizable()`	`@direction: both`	Pangani chinthu chilichonse kuti chiwonjezeke kumanja ndi pansi
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Pangani zomwe zili muzinthu zilizonse zigwiritse ntchito mizati ya CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation mukafuna (kuphatikiza `word-wrap: break-word`)

Zoyambira ndi ma gradients

Sakanizani	Parameters	Kugwiritsa ntchito
`#translucent > .background()`	`@color: @white, @alpha: 1`	Perekani chinthu mtundu wakumbuyo wowonekera
`#translucent > .border()`	`@color: @white, @alpha: 1`	Perekani chinthu mtundu wamalire wowoneka bwino
`#gradient > .vertical()`	`@startColor, @endColor`	Pangani chopendekera chakumbuyo kwa msakatuli woyimirira
`#gradient > .horizontal()`	`@startColor, @endColor`	Pangani chopingasa chopingasa chopingasa chakumbuyo gradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Pangani cholowera chakumbuyo chakumbuyo kwa msakatuli
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Pangani msakatuli wamitundu itatu wakumbuyo gradient
`#gradient > .radial()`	`@innerColor, @outerColor`	Pangani chowongoka chozungulira msakatuli wa radial background gradient
`#gradient > .striped()`	`@color, @angle`	Pangani chopendekera chakumbuyo cha msakatuli chamizeremizere
`#gradientBar()`	`@primaryColor, @secondaryColor`	Amagwiritsidwa ntchito pa mabatani kuti awonetse malire a gradient ndi akuda pang'ono

Zindikirani: Ngati mukutumiza pempho la kukoka ku GitHub yokhala ndi CSS yosinthidwa, muyenera kubwezeretsanso CSS kudzera mwa njira izi.

Zida zopangira

Node yokhala ndi makefile

Ikani makina a LESS command line compiler, JSHint, Recess, ndi uglip-js padziko lonse lapansi ndi npm poyendetsa lamulo ili:

$ npm install -g zochepa jshint recess ugify-js

Mukangoyika, ingothamanga makekuchokera muzu wa bukhu la bootstrap yanu ndipo mwakonzeka.

Kuphatikiza apo, ngati mwayika watchr , mutha kuthamanga make watchkuti bootstrap imangidwenso nthawi zonse mukasintha fayilo mu bootstrap lib (izi sizofunikira, njira yosavuta).

Mzere wolamula

Ikani chida cha mzere wa LESS kudzera pa Node ndikuyendetsa lamulo ili:

$ lessc ./less/bootstrap.less > bootstrap.css

Onetsetsani kuti muphatikizepo --compresslamuloli ngati mukuyesera kusunga ma byte ena!

Javascript

Tsitsani zaposachedwa za Les.js ndikuphatikiza njira yopitako (ndi Bootstrap) mu fayilo ya <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Kuti mukonzenso mafayilo a .less, ingowasunga ndikutsitsanso tsamba lanu. Less.js amazipanga ndikuzisunga m'malo osungira kwanuko.

Pulogalamu ya Mac yosavomerezeka

Pulogalamu yosavomerezeka ya Mac imayang'ana maulozera a mafayilo .less ndikuphatikiza ma code kumafayilo am'deralo pambuyo pa kusungidwa kulikonse kwa fayilo yowonera .less.

Ngati mukufuna, mutha kusintha zokonda mu pulogalamuyo kuti muzingodzipangira zokha komanso kuti mafayilo omwe aphatikizidwa amatheramo.

Yomangidwa ndi LESS

Chifukwa chiyani ZOCHEPA?

Zomwe zikuphatikizidwa?

Dziwani zambiri

Zosintha

Zosakaniza

Zochita

Zosintha za Bootstrap LESS, mayendedwe awo, ndi malangizo ogwiritsira ntchito

Masamba ndi maulalo

Grid system

Kujambula

Matebulo

Mitundu ya Grayscale

Mitundu ya mawu

Zigawo

Mabatani

Mafomu

Ma fomu ndi zidziwitso

Navbar

Zotsitsa

Hero unit

Zosakaniza za Bootstrap

Za zosakaniza

Zosakaniza zoyambira

Zosakaniza za Parametric

Onjezani zanu mosavuta

Kuphatikizapo zosakaniza

Zothandizira

Mafomu

Kujambula

Grid system

Zithunzi za CSS3

Zoyambira ndi ma gradients

Kupanga Bootstrap ndi LESS

Zida zopangira

Node yokhala ndi makefile

Mzere wolamula

Javascript

Pulogalamu ya Mac yosavomerezeka

Mapulogalamu ena a Mac

Crunch

KodiKit

Zosavuta