Ho sebelisa LESS ka Bootstrap
Iketsetse le ho holisa Bootstrap ka LESS , preprocessor ea CSS, ho nka monyetla ka mefuta e fapaneng, metsoako, le tse ling tse sebelisoang ho aha CSS ea Bootstrap.
E hahiloe ka TLHOKOMELO
Ke Hobane'ng ha HO LE TLASE?
Bootstrap e entsoe ka LESS motheong oa eona, puo e matla ea li-stylesheet e entsoeng ke motsoalle oa rona oa hlooho ea khomo, Alexis Sellier . E etsa hore ho nts'etsapele CSS e thehiloeng ho sistimi kapele, ho be bonolo, hape ho be monate.
Ho kenyelelitsoe eng?
E le katoloso ea CSS, LESS e kenyelletsa mefuta e fapaneng, li-mixins bakeng sa likaroloana tse ka sebelisoang hape tsa khoutu, ts'ebetso ea lipalo tse bonolo, ho etsa sehlaha, esita le mesebetsi ea mebala.
Lintho tse fapaneng
Ho laola mebala le litekanyetso tsa pixel ho CSS e ka ba bohloko bo itseng, hangata bo tletse kopi le peista. Eseng ka LESS leha ho le joalo - fana ka mebala kapa boleng ba pixel joalo ka mefuta e fapaneng 'me u e fetole hang.
Metsoako
Liphatlalatso tseo tse tharo tsa moeli-radius tseo u hlokang ho li etsa ka CSS ea kamehla? Hona joale ba theohile moleng o le mong ka thuso ea li-mixins, li-snippets tsa khoutu tseo u ka li sebelisang hape kae kapa kae.
Ts'ebetso
Etsa hore grid ea hau, e etelle pele, 'me e be bonolo haholoanyane ka ho etsa lipalo ha u fofa ka ts'ebetso. Ikatisetsa, arola, eketsa, 'me u tlose tsela ea hau ho CSS sanity.
Bootstrap e feto-fetoha LESS mefuta e fapaneng, boleng ba bona, le tataiso ea tšebeliso
Li-hyperlink
@linkColor |
#08c | 'Mala oa mongolo oa kamehla | |
@linkColorHover |
darken(@linkColor, 15%) |
Mmala oa kamehla oa sehokelo sa mongolo |
Sistimi ea grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tlhaloso ea litlhaku
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Mebala e bohlooho
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#ff |
Mebala ea molumo
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Likaroloana
Likonopo
@primaryButtonBackground |
@linkColor |
Mefuta
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Maemo a foromo le litlhokomeliso
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Metsoako ea Bootstrap
Mabapi le metsoako
Metsoako ea mantlha
Motsoako oa mantlha ha e le hantle ke kenyelletso kapa karolo e itseng bakeng sa snippet ea CSS. Li ngotsoe joalo ka sehlopha sa CSS 'me li ka bitsoa kae kapa kae.
- . karolo {
- . clearfix ();
- }
Metsoako ea Parametric
Motsoako oa parametric o tšoana le motsoako oa mantlha, empa o boetse o amohela liparamente (ka hona lebitso) ka boleng ba boikhethelo.
- . karolo {
- . moeli - radius ( 4px );
- }
Kenya ea hau habonolo
Hoo e ka bang metsoako eohle ea Bootstrap e bolokiloe ka li-mixins.less, e babatsehang utility .less faele e nolofalletsang hore u sebelise motsoako ho efe kapa efe ea .less difaele ka har'a toolkit.
Kahoo, tsoela pele 'me u sebelise tse seng li ntse li le teng kapa u ikutloe u lokolohile ho eketsa tsa hau kamoo u hlokang kateng.
E kenyelelitsoe metsoako
Lisebelisoa
| Kopanya | Mekhahlelo | Tšebeliso |
|---|---|---|
.clearfix() |
ha ho letho | Eketsa ho motsoali ofe kapa ofe ho hlakola liphaphatha ka hare |
.tab-focus() |
ha ho letho | Sebelisa mokhoa oa ho tsepamisa maikutlo ho Webkit le kemiso ea Firefox e potolohileng |
.center-block() |
ha ho letho | Auto center a block-level element u sebelisamargin: auto |
.ie7-inline-block() |
ha ho letho | Sebelisa ho phaella ho tloaelehileng display: inline-blockho fumana tšehetso ea IE7 |
.size() |
@height: 5px, @width: 5px |
Ka potlako beha bolelele le bophara moleng o le mong |
.square() |
@size: 5px |
E haha .size()ho beha bophara le bophahamo e le boleng bo tšoanang |
.opacity() |
@opacity: 100 |
Beha, ka lipalo tse felletseng, peresente ea opacity (mohlala, "50" kapa "75") |
Mefuta
| Kopanya | Mekhahlelo | Tšebeliso |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Seta placeholder'mala oa mongolo bakeng sa lintho tse kenang |
Tlhaloso ea litlhaku
| Kopanya | Mekhahlelo | Tšebeliso |
|---|---|---|
#font > #family > .serif() |
ha ho letho | Etsa element ho sebelisa serif fonte stack |
#font > #family > .sans-serif() |
ha ho letho | Etsa ntho e itseng u sebelise stack ea fonte ea sans-serif |
#font > #family > .monospace() |
ha ho letho | Etsa ntho e itseng u sebelise stack ea mongolo oa monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta boholo ba fonte ha bonolo, boima ba 'mele le moetapele |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Beha lelapa la fonte ho serif, 'me u laole boholo, boima le moetapele |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Beha lelapa la fonte ho sans-serif, 'me u laole boholo, boima le moetapele |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Beha lelapa la fonte ho monospace, 'me u laole boholo, boima le moetapele |
Sistimi ea grid
| Kopanya | Mekhahlelo | Tšebeliso |
|---|---|---|
.container-fixed() |
ha ho letho | Theha sets'oants'o se otlolohileng ho boloka litaba tsa hau |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Hlahisa sistimi ea grid ea pixel (setshelo, mola, le litšiea) tse nang le likholomo le x |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Hlahisa sistimi ea marang-rang ea morao-rao e nang le litšiea tsa n le x % gutter e pharaletseng |
Lintho tsa CSS3
| Kopanya | Mekhahlelo | Tšebeliso |
|---|---|---|
.border-radius() |
@radius: 5px |
Ho potoloha likhutlo tsa element. E ka ba boleng bo le bong kapa litekanyetso tse 'nè tse arohaneng tsa sebaka |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Kenya moriti oa marotholi ho element |
.transition() |
@transition |
Kenya phello ea phetoho ea CSS3 (mohlala, all .2s linear) |
.rotate() |
@degrees |
Fetola element n degrees |
.scale() |
@ratio |
Eketsa element ho n ka boholo ba eona ba pele |
.translate() |
@x: 0, @y: 0 |
Tsamaisa element ho lifofane tsa x le y |
.background-clip() |
@clip |
Fokotsa bokamorao ba elemente (e molemo bakeng sa border-radius) |
.background-size() |
@size |
Laola boholo ba litšoantšo tse ka morao ka CSS3 |
.box-sizing() |
@boxmodel |
Fetola mohlala oa lebokose bakeng sa element (mohlala, border-boxbakeng sa bophara bo felletseng input) |
.user-select() |
@select |
Laola khetho ea khesara ea mongolo leqepheng |
.resizable() |
@direction: both |
Etsa hore element efe kapa efe e be matla ka ho le letona le tlase |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Etsa hore litaba tsa elemente efe kapa efe li sebelise likholomo tsa CSS3 |
Backgrounds le gradients
| Kopanya | Mekhahlelo | Tšebeliso |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Fana ka elemente bokamorao ba 'mala o benyang |
#translucent > .border() |
@color: @white, @alpha: 1 |
Fana ka elemente 'mala oa moeli o fetelletseng |
#gradient > .vertical() |
@startColor, @endColor |
Theha sebopeho sa bokamorao ba sebatli se otlolohileng |
#gradient > .horizontal() |
@startColor, @endColor |
Etsa sebopeho sa sebatli se tšekaletseng se ka morao |
#gradient > .directional() |
@startColor, @endColor, @deg |
Theha sebopeho sa bokamorao ba sebatli |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Theha sebatli se nang le mebala e meraro sa bokamorao ba gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Etsa "cross-browser radial" gradient |
#gradient > .striped() |
@color, @angle |
Theha sebopeho sa bokamorao ba sebatli se nang le methalo e fapaneng |
#gradientBar() |
@primaryColor, @secondaryColor |
E sebelisoa bakeng sa likonopo ho abela gradient le moeli o lefifi hanyane |
Ho kopanya Bootstrap le LESS
Lisebelisoa tsa ho bokella
Node e nang le makefile
Kenya khokahanyo ea taelo ea LESS le uglip-js lefatšeng ka bophara ka npm ka ho sebelisa taelo e latelang:
$ npm kenya -g less ugify-js
Hang ha e kenyelitsoe feela matha makeho tloha motso oa bukana ea hau ea bootstrap 'me u se u hlophisitsoe.
Ho phaella moo, haeba u kentse watchr , u ka 'na ua matha make watchho etsa hore bootstrap e tsosolosoe nako le nako ha u hlophisa faele ho bootstrap lib (sena ha se hlokehe, mokhoa o bonolo feela).
Mola oa taelo
Kenya sesebelisoa sa mola oa taelo ea LESS ka Node 'me u tsamaise taelo e latelang:
$ lessc ./lib/bootstrap.less > bootstrap.css
Etsa bonnete ba hore o kenyelletsa --compresstaelong eo haeba o leka ho boloka li-byte tse ling!
Javascript
Khoasolla tsa morao-rao Les.js 'me u kenyelle tsela e eang ho eona (le Bootstrap) ho <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Ho bokella lifaele tsa .less, li boloke feela 'me u kenye leqephe la hau bocha. Less.js ea li bokella le ho li boloka polokelong ea lehae.
Sesebelisoa sa Mac se seng molaong
Sesebelisoa se seng sa semmuso sa Mac se shebella li-directory tsa lifaele tse .less mme se bokella khoutu ho lifaele tsa lehae kamora ho boloka nako le nako ha faele e shebeliloeng .less.
Haeba u rata, u ka fetola likhetho ho app bakeng sa miniifying ea othomathiki le hore na lifaele tse hlophisitsoeng li qetella li le ho eng.
Lisebelisoa tse ling tsa Mac
Kgutla
Crunch ke mohlophisi ea shebahalang hantle haholo LESS le moqapi o hahiloeng holim'a Adobe Air.
CodeKit
CodeKit e entsoe ke mohlankana ea tšoanang le app e seng ea semmuso ea Mac, ke sesebelisoa sa Mac se kopanyang LESS, SASS, Stylus, le CoffeeScript.
E bonolo
Mac, Linux, le app ea PC bakeng sa ho hula le ho theola lifaele tse LES. Ho feta moo, khoutu ea mohloli e ho GitHub .