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

ZOCHEPA CSS

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.

  1. . chinthu {
  2. . clearfix ();
  3. }

Zosakaniza za Parametric

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

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

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 ntchitomargin: auto
.ie7-inline-block() palibe Gwiritsani ntchito kuphatikiza pafupipafupi display: inline-blockkuti 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 placeholdermtundu 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 inputpazinthu, kuwerengera padding ndi malire
.makeColumn @columns: 1, @offset: 0 Sinthani chilichonse divkukhala 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-boxkukula 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.

Mapulogalamu ena a Mac

Crunch

Crunch ndiwowoneka bwino kwambiri wa LESS mkonzi komanso wopanga zinthu zomangidwa pa Adobe Air.

KodiKit

Wopangidwa ndi munthu yemweyo ngati pulogalamu ya Mac yosavomerezeka, CodeKit ndi pulogalamu ya Mac yomwe imapanga LESS, SASS, Stylus, ndi CoffeeScript.

Zosavuta

Mac, Linux, ndi pulogalamu ya PC yokoka ndikuponya mafayilo Ochepa. Kuphatikiza apo, code source ili pa GitHub .