Hazie na ịgbatị Bootstrap na LESS , onye na-ebu ụzọ CSS, ka ị nweta uru nke mgbanwe, mixins, na ihe ndị ọzọ ejiri wuo Bootstrap's CSS.
A na-eme Bootstrap na obere ala na isi ya, asụsụ ụdị ụdị dị ike nke ezigbo enyi anyị, Alexis Sellier kere . Ọ na-eme mmepe CSS dabere na sistemu ngwa ngwa, dị mfe na ihe ọchị karịa.
Dị ka ndọtị nke CSS, obere na-agụnye mgbanwe, mixins maka reusable snippets nke koodu, arụmọrụ maka mfe mgbakọ na mwepụ, nesting, na ọbụna agba ọrụ.
Gaa na webụsaịtị gọọmentị na http://lesscss.org/ ka ịmatakwu ihe.
Ijikwa agba na ụkpụrụ pikselụ na CSS nwere ike ịbụ ntakịrị ihe mgbu, na-ejupụtakarị na nnomi na mado. Ọ bụghị na obere n'agbanyeghị - kenye agba ma ọ bụ ụkpụrụ pikselụ dị ka mgbanwe wee gbanwee ha otu ugboro.
Nkwuwapụta oke-oke atọ ahụ ị ga-emerịrị na CSS? Ugbu a, ha na-agbada n'otu ahịrị site n'enyemaka nke mixins, snippets nke koodu ị nwere ike ijikwa ebe ọ bụla.
Mee ka grid gị, na-edu, na nke ukwuu na-agbanwe agbanwe site na iji ọrụ na-eme mgbakọ na mwepụ na ofufe. Ọtụtụ, kewaa, gbakwunye, ma wepụ ụzọ gị gaa na ịdị ọcha CSS.
@linkColor |
#08c | Agba ederede njikọ ezighi ezi | |
@linkColorHover |
darken(@linkColor, 15%) |
Agba mgbagharị ederede njikọ ezighi ezi |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeee | |
@white |
#nff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 | |
@warningBackground |
# c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3 ruo 87 | |
@infoBackground |
#d9edf7 |
Ngwakọta bụ isi bụ n'ezie gụnyere ma ọ bụ akụkụ maka snippet nke CSS. Edere ha dị ka klaasị CSS ma enwere ike ịkpọ ha ebe ọ bụla.
- . mmewere {
- . mkpochapụ ();
- }
Ngwakọta parametric dị ka mixin bụ isi, mana ọ na-anabatakwa paramita (ya mere aha ahụ) yana ụkpụrụ ndabara nhọrọ.
- . mmewere {
- . oke - radius ( 4px );
- }
Ihe fọrọ nke nta ka ọ bụrụ mixins niile nke Bootstrap na-echekwa na mixins.less, ihe magburu onwe ya na-abaghị uru faịlụ na-enyere gị aka iji mixin na nke ọ bụla n'ime faịlụ . obere na ngwá ọrụ.
Yabụ, gaa n'ihu jiri ndị dị adị ma ọ bụ nweere onwe gị ịgbakwunye nke gị dịka ịchọrọ.
Ngwakọta | Oke | Ojiji |
---|---|---|
.clearfix() |
onweghi | Tinye na nne na nna ọ bụla iji kpochapụ ihe na-ese n'elu |
.tab-focus() |
onweghi | Tinye ụdị nlebara anya Webkit yana ihe ndepụta Firefox gburugburu |
.center-block() |
onweghi | Nchekwa onwe nke ihe mgbochi-larịị n'ijimargin: auto |
.ie7-inline-block() |
onweghi | Jiri na mgbakwunye na oge niile display: inline-block iji nweta nkwado IE7 |
.size() |
@height: 5px, @width: 5px |
Tọọ ngwa ngwa na ịdị elu na obosara n'otu ahịrị |
.square() |
@size: 5px |
Na-ewuli elu .size() ka ịtọ obosara na ịdị elu ka otu uru |
.opacity() |
@opacity: 100 |
Tọọ, n'ọnụọgụ dum, pasent nke oghere (dịka, "50" ma ọ bụ "75") |
Ngwakọta | Oke | Ojiji |
---|---|---|
.placeholder() |
@color: @placeholderText |
Tọọ placeholder ụcha ederede maka ntinye |
Ngwakọta | Oke | Ojiji |
---|---|---|
#font > #family > .serif() |
onweghi | Mee mmewere jiri ndokọ mkpụrụedemede serif |
#font > #family > .sans-serif() |
onweghi | Mee mmewere jiri ndokọba mkpụrụedemede sans-serif |
#font > #family > .monospace() |
onweghi | Mepụta mmewere jiri nchịkọta mkpụrụedemede monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Hazie nha mkpụrụedemede, ịdị arọ na ụzọ n'ụzọ dị mfe |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tọọ ezinụlọ font ka ọ bụrụ serif, ma jikwaa nha, ịdị arọ na ụzọ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tọọ ezinụlọ font na sans-serif, ma jikwaa nha, ịdị arọ na ụzọ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tọọ ezinụlọ font ka ọ bụrụ monospace, ma jikwaa nha, ịdị arọ na ụzọ |
Ngwakọta | Oke | Ojiji |
---|---|---|
.container-fixed() |
onweghi | Nye akpa nwere obosara nke obosara @siteWidth maka ijide ọdịnaya gị |
.columns() |
@columns: 1 |
Wulite kọlụm grid nke gbasara ọnụọgụ kọlụm ọ bụla (ndabara na kọlụm 1) |
.offset() |
@columns: 1 |
Wepụ kọlụm grid nwere oke aka ekpe nke gbasara ọnụọgụ ogidi ọ bụla |
.gridColumn() |
onweghi | Mee ka ihe na-ese n'elu dị ka kọlụm grid |
Ngwakọta | Oke | Ojiji |
---|---|---|
.border-radius() |
@radius: 5px |
Gburugburu akụkụ nke mmewere. Nwere ike ịbụ otu uru ma ọ bụ ụkpụrụ anọ kewara oghere |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Tinye onyinyo dobe na mmewere |
.transition() |
@transition |
Tinye mmetụta mgbanwe CSS3 (dịka ọmụmaatụ, all .2s linear ) |
.rotate() |
@degrees |
Tụgharịa ihe mmewere n degrees |
.scale() |
@ratio |
Gbanwee ihe mmewere ka n oge ọ bụ nha mbụ |
.translate() |
@x: 0, @y: 0 |
Bugharịa otu mmewere na ụgbọ elu x na y |
.background-clip() |
@clip |
Kpoo ihe ndabere nke ihe mmewere (bara uru maka border-radius ) |
.background-size() |
@size |
Jikwaa nha onyonyo ndabere site na CSS3 |
.box-sizing() |
@boxmodel |
Gbanwee ụdị igbe maka mmewere (dịka, border-box maka obosara zuru oke input ) |
.user-select() |
@select |
Jikwaa nhọrọ ederede cursor na ibe |
.resizable() |
@direction: both |
Mee ka ihe ọ bụla gbanwee n'aka nri na ala |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Mee ọdịnaya nke ihe ọ bụla jiri kọlụm CSS3 |
Ngwakọta | Oke | Ojiji |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Nye ihe mmewere ka ọ bụrụ ụcha ndabere translucent |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Nye ihe mmewere agba oke oke translucent |
.#gradient > .vertical() |
@startColor, @endColor |
Mepụta gradient ndabere kwụ ọtọ n'ofe ihe nchọgharị |
.#gradient > .horizontal() |
@startColor, @endColor |
Mepụta gradient n'okirikiri ihe nchọgharị gafere |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Mepụta gradient ndabere ntụzịaka ihe nchọgharị |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Mepụta ihe nchọgharị n'okirikiri agba atọ |
.#gradient > .radial() |
@innerColor, @outerColor |
Mepụta gradient ndabere radial cross-browser |
.#gradient > .striped() |
@color, @angle |
Mepụta gradient okirikiri nwere akara ihe nchọgharị obe |
.#gradientBar() |
@primaryColor, @secondaryColor |
Ejiri ya maka bọtịnụ iji kenye oke gradient na ntakịrị ọchịchịrị |
Wụnye nchịkọta iwu LESS na npm site na iji iwu na-esonụ:
$ npm wụnye obere
Ozugbo etinyere ya, gba ọsọ make
site na mgbọrọgwụ nke ndekọ ndekọ bootstrap gị ma edobela gị niile.
Na mgbakwunye, ọ bụrụ na etinyere onye nche , ị nwere ike ịgba ọsọ make watch
ka eweghachi bootstrap na-akpaghị aka oge ọ bụla ị dezie faịlụ na bootstrap lib (nke a anaghị achọ, naanị usoro dị mma).
Wụnye ngwa ahịrị ahịrị LESS site na Node wee mee iwu a:
$ lessc ./lib/bootstrap.less > bootstrap.css
Jide n'aka na itinye --compress
n'iwu ahụ ma ọ bụrụ na ị na-agbalị ichekwa ụfọdụ bytes!
Budata Less.js kacha ọhụrụ wee tinye ụzọ ya (na Bootstrap) na faịlụ <head>
.
<njikọ rel = "stylesheet/less" href = "/ụzọ/to/bootstrap.less" > <script src = "/ụzọ/to/less.js" ></script>
Iji chịkọta faịlụ ndị na-erughị obere, naanị chekwaa ha wee bugharịa ibe gị. Less.js na-achịkọta ha ma na-echekwa ha na nchekwa mpaghara.
Ngwa Mac na-akwadoghị na- elele akwụkwọ ndekọ aha nke faịlụ ndị na-enweghị obere ma na-achịkọta koodu ahụ na faịlụ mpaghara mgbe nchekwa ọ bụla nke faịlụ na-enweghị .
Ọ bụrụ na-amasị gị, ị nwere ike ịgbanwe mmasị na ngwa ahụ maka iwetulata akpaaka yana akwụkwọ ndekọ aha faịlụ ekpokọtara na-ejedebe.
Crunch bụ ezigbo onye na-edezi ihe na-agụkọta ihe na-enweghị atụ nke e wuru na Adobe Air.
Otu nwoke mebere ya dị ka ngwa Mac na-akwadoghị, CodeKit bụ ngwa Mac na-achịkọta LESS, SASS, Stylus na CoffeeScript.
Mac, Linux, na ngwa PC maka ịdọrọ na dobe nchịkọta faịlụ ndị dị obere. Ọzọkwa, koodu isi mmalite dị na GitHub .