Kushandisa LESS neBootstrap

Gadzirisa uye uwedzere Bootstrap neLESS , CSS preprocessor, kutora mukana wezvakasiyana, musanganiswa, uye zvimwe zvinoshandiswa kuvaka Bootstrap's CSS.

Sei ZVINODZIKA?

Bootstrap inogadzirwa neLESS pamusimboti wayo, mutauro wesheetti ine simba wakagadzirwa neshamwari yedu yakanaka, Alexis Sellier . Inoita kugadzira masisitimu-yakavakirwa CSS nekukurumidza, nyore, uye kunakidza.

Chii chinosanganisirwa?

Sewedzero yeCSS, LESS inosanganisira zvinoshanduka, musanganiswa wekudzoreredza snippets yekodhi, mashandiro emasvomhu akareruka, nesting, uye kunyange mavara mabasa.

Dzidza zvimwe

SHOKO CSS

Shanyira webhusaiti yepamutemo pa http://lesscss.org/ kuti udzidze zvakawanda.

Variables

Kugadzirisa mavara uye pixel kukosha muCSS kunogona kurwadza zvishoma, kazhinji kuzere nekopi nekuisa. Kwete neLESS kunyangwe-pa mavara kana pixel kukosha sezvichinjika uye wozvishandura kamwe chete.

Mixins

Iwo matatu matatu emuganho-radius kuzivisa iwe yaunofanirwa kuita mune yenguva dzose ol 'CSS? Ikozvino vadzika kumutsara mumwe nerubatsiro rwemisanganiswa, snippets yekodhi iwe yaunogona kushandisazve chero kupi.

Operations

Gadzira gridhi yako, inotungamira, uye yakanyanya kuchinjika nekuita masvomhu panhunzi nemashandiro. Wanza, patsanura, wedzera, uye bvisa nzira yako kune CSS hutsanana.

Scaffolding uye links

@bodyBackground @white Peji yekumashure ruvara
@textColor @grayDark Default mavara mavara emuviri wese, misoro, nezvimwe
@linkColor #08c Default link mavara mavara
@linkColorHover darken(@linkColor, 15%) Default link mavara hover ruvara

Grid system

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

Typography

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

Matafura

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

Grayscale mavara

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

Accent mavara

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

Zvikamu

Mabhatani

@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

Fomu nyika uye zviziviso

@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

Dropdowns

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

Hero chikwata

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Pamusoro pemisanganiswa

Basic mixs

A basic mixin inonyanya kusanganisa kana chidimbu chechidimbu cheCSS. Izvo zvakanyorwa sekirasi yeCSS uye zvinogona kudanwa chero kupi.

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

Parametric musanganiswa

Iyo parametric musanganiswa yakangofanana neyekutanga musanganiswa, asi zvakare inogamuchira paramita (naizvozvo zita) ine sarudzo yekusarudzika tsika.

  1. . chinhu {
  2. . muganhu - radius ( 4px );
  3. }

Wedzera zvako zviri nyore

Zvinenge zvese zveBootstrap zvakasanganiswa zvakachengetwa mumixins.less, inoshamisa utility .less faira inoita kuti iwe ushandise mixin mune chero .less mafaira mutoolkit.

Saka, enda mberi uye shandisa zviripo kana kunzwa wakasununguka kuwedzera yako sezvaunoda.

Inosanganisirwa misanganiswa

Utilities

Mixin Parameters Usage
.clearfix() hapana Wedzera kune chero mubereki kubvisa zvinoyangarara mukati
.tab-focus() hapana Isa iyo Webkit yekutarisa maitiro uye yakatenderedza Firefox chinyorwa
.center-block() hapana Auto pakati pe block-level element uchishandisamargin: auto
.ie7-inline-block() hapana Shandisa kuwedzera kune yenguva dzose display: inline-blockkuwana IE7 rutsigiro
.size() @height @width Kurumidza kuisa urefu uye hupamhi pamutsara mumwe
.square() @size Inovaka pamusoro .size()pekuisa hupamhi nehurefu sehukoshi hwakafanana
.opacity() @opacity Seta, muhuwandu hwakazara, iyo opacity percentage (semuenzaniso, "50" kana "75")

Mafomu

Mixin Parameters Usage
.placeholder() @color: @placeholderText Seta placeholdermavara emavara ekuisa

Typography

Mixin Parameters Usage
#font > #family > .serif() hapana Gadzira chinhu shandisa serif font stack
#font > #family > .sans-serif() hapana Gadzira chinhu shandisa sans-serif font stack
#font > #family > .monospace() hapana Ita chinhu shandisa monospace font stack
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta saizi yefonti zviri nyore, uremu, uye kutungamira
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta font mhuri kune serif, uye kudzora saizi, uremu, uye kutungamira
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta font mhuri kune sans-serif, uye kudzora saizi, uremu, uye kutungamira
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta font mhuri kune monospace, uye kudzora saizi, uremu, uye kutungamira

Grid system

Mixin Parameters Usage
.container-fixed() hapana Gadzira chigadziko chakachinjika chekubata zvirimo
#grid > .core() @gridColumnWidth, @gridGutterWidth Gadzira pixel grid system (mudziyo, mutsara, uye makoramu) ine n column uye x pixel yakafara gutter.
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Gadzira chikamu chegridi system ine n column uye x % gutter yakakura
#grid > .input() @gridColumnWidth, @gridGutterWidth Gadzira iyo pixel grid system inputyezvinhu, accounting yepadding uye miganhu
.makeColumn @columns: 1, @offset: 0 Shandura chero divkuita gidhi column pasina .span*makirasi

CSS3 zvivakwa

Mixin Parameters Usage
.border-radius() @radius Rongedza makona echinhu. Inogona kuva yakakosha kana mana nzvimbo-yakapatsanurwa kukosha
.box-shadow() @shadow Wedzera mumvuri wekudonha kune chimwe chinhu
.transition() @transition Wedzera CSS3 shanduko mhedzisiro (semuenzaniso, all .2s linear)
.rotate() @degrees Tenderedza chinhu n madhigirii
.scale() @ratio Cheresa chinhu kusvika n pekukura kwayo kwepakutanga
.translate() @x, @y Fambisa chinhu pane x uye y ndege
.background-clip() @clip Dhonza kumashure kwechinhu (chinobatsira border-radius)
.background-size() @size Dzora saizi yemifananidzo yekumashure kuburikidza neCSS3
.box-sizing() @boxmodel Shandura modhi yebhokisi rechinhu (semuenzaniso, border-boxhupamhi hwakazara input)
.user-select() @select Dzora kusarudzwa kwemavara pane peji
.backface-visibility() @visibility: visible Dzivirira kupenya kwezvinhu kana uchishandisa CSS 3D inoshandura
.resizable() @direction: both Ita kuti chero chinhu chiwedzere kukura kurudyi nepasi
.content-columns() @columnCount, @columnGap: @gridGutterWidth Ita zviri mukati mechero chinhu shandisa CSS3 makoramu
.hyphens() @mode: auto CSS3 hyphenation paunenge uchida (inosanganisira word-wrap: break-word)

Backgrounds uye gradients

Mixin Parameters Usage
#translucent > .background() @color: @white, @alpha: 1 Ipa chinhu ruvara rwekumashure rwunopenya
#translucent > .border() @color: @white, @alpha: 1 Ipa chinhu mupendero wakajeka
#gradient > .vertical() @startColor, @endColor Gadzira kuchinjika-browser yakatwasuka kumashure gradient
#gradient > .horizontal() @startColor, @endColor Gadzira muchinjika-browser yakatwasuka kumashure gradient
#gradient > .directional() @startColor, @endColor, @deg Gadzira muchinjika-browser inotungamira kumashure gradient
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Gadzira muchinjika-browser matatu-mavara kumashure gradient
#gradient > .radial() @innerColor, @outerColor Gadzira muchinjika-browser radial kumashure gradient
#gradient > .striped() @color, @angle Gadzira muchinjika-browser mitsetse yekumashure gradient
#gradientBar() @primaryColor, @secondaryColor Inoshandiswa kumabhatani kugovera gradient uye muganhu wakasviba zvishoma
Ongorora: Kana iwe uri kuendesa chikumbiro chekudhonza kuGitHub ine yakagadziridzwa CSS, unofanirwa kudzorera iyo CSS kuburikidza neipi yeidzi nzira.

Zvishandiso zvekugadzira

Node ine makefile

Isa iyo LESS command line compiler, JSHint, Recess, uye uglip-js pasi rose ne npm nekumhanyisa unotevera kuraira:

$ npm install -g shoma jshint recess ugify-js

Kana yangoiswa ingomhanya makekubva pamudzi webhootstrap dhairekitori uye mese magadzirira.

Pamusoro pezvo, kana iwe uine watchr yakaiswa, unogona kumhanya make watchkuti bootstrap ivakwe otomatiki pese paunogadzirisa faira mubootstrap lib (izvi hazvidiwe, ingori nyore nzira).

Command line

Isa iyo LESS yekuraira mutsara chishandiso kuburikidza neNode uye mhanyisa unotevera kuraira:

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

Iva nechokwadi chekuisa --compressmumurairo iwoyo kana uri kuedza kuchengetedza mamwe mabhaiti!

Javascript

Dhawunirodha yazvino Les.js uye sanganisira nzira yekuenda nayo (uye Bootstrap) mu <head>.

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

Kuti uunganidze zvakare mafaira .less, ingoachengeta uye worodha peji rako zvakare. Less.js inozviunganidza uye nekuzvichengeta munzvimbo yekuchengetedza.

Unofficial Mac app

Iyo isina pamutemo Mac app inoona madhairekitori e.less mafaira uye inounganidza kodhi kumafaira emunharaunda mushure mesevha yega yega yakatariswa .less faira.

Kana iwe uchida, iwe unogona kushandura zvaunofarira muapp kuti uite miniifying uye iyo dhairekitori iyo akaunganidzwa mafaera anoguma mukati.

More Mac apps

Crunch

Crunch inotaridzika zvakanaka LESS mupepeti uye mugadziri akavakirwa paAdobe Air.

CodeKit

Yakagadzirwa nemukomana mumwechete seasina pamutemo Mac app, CodeKit iMac app inogadzira LESS, SASS, Stylus, uye CoffeeScript.

Zviri nyore

Mac, Linux, uye PC app yekukweva uye kudonhedza kuunganidza kwema LESS mafaera. Uyezve, iyo kodhi kodhi iri paGitHub .