Ke hoʻohana nei i ka LESS me Bootstrap

Hoʻopilikino a hoʻonui i ka Bootstrap me LESS , kahi CSS preprocessor, e hoʻohana pono i nā mea hoʻololi, hui pū, a me nā mea hou aʻe i hoʻohana ʻia e kūkulu i kā Bootstrap CSS.

No ke aha i emi ai?

Hana ʻia ʻo Bootstrap me LESS ma kāna kumu, he ʻōlelo stylesheet ikaika i hana ʻia e kā mākou hoaaloha maikaʻi, ʻo Alexis Sellier . ʻOi aku ka wikiwiki, maʻalahi, a me ka leʻaleʻa o ka hoʻomohala ʻana i ka CSS e pili ana i nā ʻōnaehana.

He aha ka mea i komo?

Ma ke ʻano he hoʻonui ʻia o CSS, LESS nā mea hoʻololi, mixins no ka hoʻohana hou ʻana i nā snippets o ke code, nā hana no ka makemakika maʻalahi, nesting, a me nā hana kala.

Aʻo hou mai

NUI CSS

E kipa i ka pūnaewele mana ma http://lesscss.org/ e aʻo hou aku.

Nā mea hoʻololi

ʻO ka mālama ʻana i nā waihoʻoluʻu a me nā waiwai pixel ma CSS hiki ke lilo i mea ʻeha, maʻamau piha i ke kope a paʻi. ʻAʻole me LESS akā naʻe-e hoʻokaʻawale i nā kala a i ʻole nā ​​​​waiwai pixel e like me nā loli a hoʻololi iā lākou i hoʻokahi manawa.

Mea huikau

ʻO kēlā mau ʻōlelo hoʻolaha palena palena ʻekolu āu e pono ai e hana ma ka CSS maʻamau? I kēia manawa aia lākou i ka laina hoʻokahi me ke kōkua o mixins, snippets of code hiki iā ʻoe ke hoʻohana hou i nā wahi āpau.

Nā hana

Hana i kāu mākia, alakaʻi, a ʻoi aku ka maʻalahi ma ka hana ʻana i ka makemakika ma ka lele me nā hana. E hoʻonui, e puʻunaue, e hoʻohui, a e unuhi i kou ala i ka CSS sanity.

Scaffolding a me nā loulou

@bodyBackground @white Ka waihoʻoluʻu ʻaoʻao
@textColor @grayDark Ka waihoʻoluʻu kikokikona no ke kino holoʻokoʻa, nā poʻomanaʻo, a me nā mea hou aku
@linkColor #08c kala kikokikona loulou paʻamau
@linkColorHover darken(@linkColor, 15%) Ka waihoʻoluʻu hover kikokikona pili paʻamau

Pūnaehana mānoanoa

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

Palapala kiʻi

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px Pono nā pika
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Pono nā pika
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Nā papaʻaina

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

Nā waihoʻoluʻu hina

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

Nā waihoʻoluʻu leo

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

Nā ʻāpana

Nā pihi

@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

Nā palapala

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

Form states a me nā makaʻala

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

Navbar

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

Nā hāʻule iho

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

Hui Hero

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

E pili ana i nā mixins

Nā huila kumu

ʻO kahi mixin maʻamau he mea hoʻokomo a ʻāpana paha no kahi snippet o CSS. Ua kākau ʻia e like me ka papa CSS a hiki ke kāhea ʻia ma nā wahi āpau.

  1. .element {mea {
  2. . clearfix ();
  3. }

Nā huila parametric

ʻO ka mixin parametric e like me ka mixin maʻamau, akā ʻae pū ia i nā ʻāpana (no laila ka inoa) me nā waiwai paʻamau.

  1. .element {mea {
  2. . palena - radius ( 4px );
  3. }

Hoʻohui maʻalahi iā ʻoe iho

Ma kahi kokoke i nā hui hui ʻo Bootstrap e mālama ʻia i mixins.less, kahi faila .less maikaʻi loa e hiki ai iā ʻoe ke hoʻohana i kahi mixin i kekahi o nā faila .less i loko o ka pahu hana.

No laila, e hele a hoʻohana i nā mea i loaʻa a i ʻole e ʻoluʻolu e hoʻohui i kāu ponoʻī e like me kou makemake.

Hoʻohui pū ʻia

Nā pono hana

Mixin Nā ʻāpana Hoʻohana
.clearfix() ʻaʻohe Hoʻohui i kekahi makua e hoʻomaʻemaʻe i nā lana i loko
.tab-focus() ʻaʻohe E hoʻopili i ke ʻano kikoʻī Webkit a puni i ka outline Firefox
.center-block() ʻaʻohe Hoʻokaʻawale ʻokoʻa i kahi mea pae poloka me ka hoʻohana ʻanamargin: auto
.ie7-inline-block() ʻaʻohe E hoʻohana i ka mea maʻamau display: inline-blocke kiʻi i ke kākoʻo IE7
.size() @height @width E hoʻonohonoho koke i ke kiʻekiʻe a me ka laulā ma ka laina hoʻokahi
.square() @size Kūkulu .size()ʻia e hoʻonohonoho i ka laula a me ke kiʻekiʻe e like me ka waiwai like
.opacity() @opacity E hoʻonoho, ma nā helu holoʻokoʻa, i ka pākēneka opacity (e laʻa, "50" a i ʻole "75")

Nā palapala

Mixin Nā ʻāpana Hoʻohana
.placeholder() @color: @placeholderText E hoʻonoho i ke placeholderkala kikokikona no nā mea hoʻokomo

Palapala kiʻi

Mixin Nā ʻāpana Hoʻohana
#font > #family > .serif() ʻaʻohe E hana i kahi mea e hoʻohana i kahi pūʻulu font serif
#font > #family > .sans-serif() ʻaʻohe E hana i kahi mea e hoʻohana i kahi waihona font sans-serif
#font > #family > .monospace() ʻaʻohe E hana i kahi mea e hoʻohana i kahi waihona monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight E hoʻonohonoho maʻalahi i ka nui font, ke kaumaha, a me ke alakaʻi
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight E hoʻonoho i ka ʻohana font i serif, a e hoʻomalu i ka nui, ke kaumaha, a me ke alakaʻi
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight E hoʻonoho i ka ʻohana font i sans-serif, a e kāohi i ka nui, ke kaumaha, a me ke alakaʻi
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight E hoʻonohonoho i ka ʻohana font i ka monospace, a e hoʻomalu i ka nui, ke kaumaha, a me ke alakaʻi

Pūnaehana mānoanoa

Mixin Nā ʻāpana Hoʻohana
.container-fixed() ʻaʻohe E hoʻokumu i kahi pahu hoʻopaʻa ʻana i kāu ʻike
#grid > .core() @gridColumnWidth, @gridGutterWidth Hoʻokumu i kahi ʻōnaehana mākia pika (paʻa, lālani, a me nā kolamu) me n kolamu a me x pika ākea auwai.
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth E hana i ka ʻōnaehana mākia pākēneka me n kolamu a me x % ākea ākea
#grid > .input() @gridColumnWidth, @gridGutterWidth E hoʻomohala i ka ʻōnaehana pixel grid no inputnā mea, e helu ana i ka padding a me nā palena
.makeColumn @columns: 1, @offset: 0 E hoʻohuli i kekahi divi kolamu mānoanoa me ka ʻole o nā .span*papa

CSS3 waiwai

Mixin Nā ʻāpana Hoʻohana
.border-radius() @radius Poai i na kihi o kekahi mea. Hiki ke lilo i waiwai hoʻokahi a i ʻole ʻehā mau waiwai i hoʻokaʻawale ʻia
.box-shadow() @shadow E hoʻohui i kahi aka kulu i kahi mea
.transition() @transition Hoʻohui i ka hopena hoʻololi CSS3 (e laʻa, all .2s linear)
.rotate() @degrees E hoʻohuli i kahi ʻeleʻele n degere
.scale() @ratio E hoʻonui i kekahi mea i n mau manawa o kona nui kumu
.translate() @x, @y E hoʻoneʻe i kahi mea ma nā mokulele x a me y
.background-clip() @clip ʻOki i ke kua o kekahi mea (pono no border-radius)
.background-size() @size E kāohi i ka nui o nā kiʻi hope ma o CSS3
.box-sizing() @boxmodel E hoʻololi i ke kŘkohu pahu no kekahi mea (e laʻa, border-boxno ka laula piha input)
.user-select() @select E hoʻomalu i ke koho ʻana i ka pihi kikokikona ma kahi ʻaoʻao
.backface-visibility() @visibility: visible Kāohi i ka wiliwili ʻana o ka ʻike i ka wā e hoʻohana ai i nā hoʻololi CSS 3D
.resizable() @direction: both E hoʻololi i kekahi mea ma ka ʻākau a me lalo
.content-columns() @columnCount, @columnGap: @gridGutterWidth E hoʻohana i ka ʻike o kēlā me kēia mea i nā kolamu CSS3
.hyphens() @mode: auto CSS3 hyphenation inā makemake ʻoe (me word-wrap: break-word)

Nā kāʻei kua a me nā gradients

Mixin Nā ʻāpana Hoʻohana
#translucent > .background() @color: @white, @alpha: 1 Hāʻawi i kahi ʻeleʻele i kahi kala translucent
#translucent > .border() @color: @white, @alpha: 1 Hāʻawi i kahi ʻeleʻele i ke kala palena translucent
#gradient > .vertical() @startColor, @endColor E hana i kahi ʻōlinolino keʻa o ka polokalamu kele pūnaewele
#gradient > .horizontal() @startColor, @endColor E hana i kahi ʻōlinolino keʻa o ka polokalamu kele pūnaewele
#gradient > .directional() @startColor, @endColor, @deg E hana i kahi ʻoniʻoni ʻaoʻao ʻaoʻao o ke kua
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor E hana i ka gradient kāʻei kua ʻekolu kala kea
#gradient > .radial() @innerColor, @outerColor E hana i kahi gradient radial back-browser background
#gradient > .striped() @color, @angle E hana i kahi kaha ʻōniʻoniʻo kāʻei keʻa-browser
#gradientBar() @primaryColor, @secondaryColor Hoʻohana ʻia no nā pihi e hāʻawi i kahi palena gradient a ʻeleʻele iki
'Ōlelo Aʻo: Inā ʻoe e hoʻouna ana i kahi noi huki iā GitHub me CSS i hoʻololi ʻia, pono ʻoe e hōʻuluʻulu hou i ka CSS ma o kēia mau ʻano.

Nā mea hana no ka hōʻuluʻulu ʻana

Node me makefile

E hoʻouka i ka LESS command line compiler, JSHint, Recess, a uglify-js ma ka honua holoʻokoʻa me npm ma ka holo ʻana i kēia kauoha:

$ npm hoʻokomo -g liʻiliʻi jshint recess uglify-js

Ke hoʻokomo ʻia e holo wale makemai ke kumu o kāu papa kuhikuhi bootstrap a ua mākaukau ʻoe.

Eia hou, inā ua hoʻokomo ʻia ʻo watchr , hiki iā ʻoe ke holo make watche hana hou i ka bootstrap i kēlā me kēia manawa āu e hoʻoponopono ai i kahi faila ma ka bootstrap lib (ʻaʻole koi ʻia kēia, he ala maʻalahi wale nō).

Laina kauoha

E hoʻouka i ka mea hana laina kauoha LESS ma o Node a holo i kēia kauoha:

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

E hoʻokomo --compressi loko o kēlā kauoha inā ʻoe e hoʻāʻo e mālama i kekahi mau bytes!

Javascript

Hoʻoiho i ka Less.js hou loa a hoʻokomo i ke ala i laila (a me Bootstrap) i ka <head>.

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

No ka hōʻuluʻulu hou ʻana i nā faila .less, mālama wale iā lākou a hoʻouka hou i kāu ʻaoʻao. Hoʻopili ʻo Less.js iā lākou a mālama iā lākou i kahi waihona kūloko.

ʻO ka polokalamu Mac manaʻole

Nānā ka polokalamu Mac manaʻole i nā papa kuhikuhi o nā faila .less a hoʻohui i ke code i nā faila kūloko ma hope o kēlā me kēia mālama ʻana o kahi faila .less i nānā ʻia.

Inā makemake ʻoe, hiki iā ʻoe ke hoʻololi i nā koho i loko o ka app no ​​ka hoʻohaʻahaʻa maʻalahi a me ka papa kuhikuhi i hoʻopau ʻia nā faila i hōʻuluʻulu ʻia.

Nā polokalamu Mac hou aku

Crunch

ʻO Crunch kahi mea hoʻoponopono LESS maikaʻi a me ka mea hoʻopili i kūkulu ʻia ma Adobe Air.

CodeKit

Hoʻokumu ʻia e ke kanaka like me ka polokalamu Mac kūʻokoʻa ʻole, CodeKit he polokalamu Mac e hōʻuluʻulu ana i LESS, SASS, Stylus, a me CoffeeScript.

maʻalahi

ʻO Mac, Linux, a me ka polokalamu PC no ka huki ʻana a me ka hoʻokuʻu ʻana i nā faila LESS. Eia kekahi, aia ke code kumu ma GitHub .