Ag baint úsáide as LESS le Bootstrap

Saincheap agus leathnaigh Bootstrap le LESS , réamhphróiseálaí CSS, chun leas a bhaint as na hathróga, na meascáin agus níos mó a úsáidtear chun CSS Bootstrap a thógáil.

Cén fáth NÍOS LÚ?

Déantar Bootstrap le LESS ina chroílár, teanga stílbhileog dhinimiciúil cruthaithe ag ár gcara maith, Alexis Sellier . Déanann sé CSS atá bunaithe ar chórais a fhorbairt níos tapúla, níos éasca agus níos spraoi.

Cad atá san áireamh?

Mar shíneadh ar CSS, folaíonn LESS athróga, meascáin le haghaidh gearrthóga cód ath-inúsáidte, oibríochtaí le haghaidh mata simplí, neadú, agus fiú feidhmeanna datha.

Foghlaim níos mó

NÍOS LÚ CSS

Tabhair cuairt ar an láithreán gréasáin oifigiúil ag http://lesscss.org/ chun tuilleadh a fhoghlaim.

Athróga

Is féidir le dathanna agus luachanna picteilín a bhainistiú i CSS a bheith beagán de phian, de ghnáth lán cóipe agus greamaigh. Ach ní lú ná sin - sann dathanna nó luachanna picteilín mar athróga agus athraigh iad uair amháin.

Meascáin

Na trí dhearbhú ga teorann sin a chaithfidh tú a dhéanamh i CSS rialta? Anois tá siad síos go dtí líne amháin le cabhair ó mheascáin, gearrthóga de chód is féidir leat a athúsáid áit ar bith.

Oibríochtaí

Déan do ghreille, ceannródaíoch, agus níos mó solúbtha super ag déanamh an mata ar an eitilt le hoibríochtaí. Méadaigh, roinn, cuir leis agus dealaigh do bhealach chuig sanity CSS.

Scafall agus naisc

@bodyBackground @white Dath cúlra an leathanaigh
@textColor @grayDark Dath an téacs réamhshocraithe don chorp iomlán, ceannteidil agus go leor eile
@linkColor #08c Dath an téacs naisc réamhshocraithe
@linkColorHover darken(@linkColor, 15%) Dath hover téacs nasc réamhshocraithe

Córas greille

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2. 127659574 %

Clóghrafaíocht

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monacó, "Courier Nua", monaspás
@baseFontSize 13px Caithfidh picteilín a bheith ann
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Caithfidh picteilín a bheith ann
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Táblaí

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

Dathanna liathscála

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

Dathanna accent

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

Comhpháirteanna

Cnaipí

@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

Foirmeacha

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

stáit fhoirm agus foláirimh

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #df0d8
@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

Droim anuas

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

Aonad laoch

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Maidir le meascáin

Meascáin bhunúsacha

Go bunúsach is éard atá i meascán bunúsach ná áireamh nó cuid do phíosa CSS. Tá siad scríofa díreach cosúil le rang CSS agus is féidir glaoch orthu áit ar bith.

  1. . eilimint {
  2. . soiléirfix ();
  3. }

Meascáin paraiméadracha

Tá mixin paraiméadrach díreach cosúil le mixin bunúsach, ach glacann sé freisin paraiméadair (mar sin an t-ainm) le luachanna réamhshocraithe roghnach.

  1. . eilimint {
  2. . teorainn - ga ( 4px );
  3. }

Cuir do chuid féin go héasca

Stóráiltear beagnach gach ceann de mheascáin Bootstrap i mixins.less, comhad fóntais iontach .less a chuireann ar do chumas mixin a úsáid in aon cheann de na comhaid .less san fhoireann uirlisí.

Mar sin, téigh ar aghaidh agus bain úsáid as na cinn atá ann cheana féin nó bíodh leisce ort do chuid féin a chur leis mar is gá duit.

meascáin san áireamh

Fóntais

Meascán Paraiméadair Úsáid
.clearfix() aon cheann Cuir le tuismitheoir ar bith é chun snámháin a ghlanadh laistigh
.tab-focus() aon cheann Cuir stíl fhócas Webkit i bhfeidhm agus imlíne bhabhta Firefox
.center-block() aon cheann Uathlár eilimint bloc-leibhéal ag baint úsáide asmargin: auto
.ie7-inline-block() aon cheann Bain úsáid as chomh maith le rialta display: inline-blockchun tacaíocht IE7 a fháil
.size() @height @width Socraigh go tapa an airde agus an leithead ar líne amháin
.square() @size Tógann sé ar .size()an leithead agus an airde a shocrú mar an luach céanna
.opacity() @opacity Socraigh, i slánuimhreacha, an céatadán teimhneachta (m.sh., "50" nó "75")

Foirmeacha

Meascán Paraiméadair Úsáid
.placeholder() @color: @placeholderText Socraigh placeholderdath an téacs le haghaidh ionchuir

Clóghrafaíocht

Meascán Paraiméadair Úsáid
#font > #family > .serif() aon cheann Déan eilimint agus úsáid á baint as cruachta cló serif
#font > #family > .sans-serif() aon cheann Déan eilimint agus bain úsáid as cruach cló sans-serif
#font > #family > .monospace() aon cheann Déan eilimint agus úsáid á baint as cruachta cló monaspáis
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Socraigh go héasca clómhéid, meáchan, agus tosaigh
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Socraigh teaghlach cló go serif, agus rialaigh méid, meáchan agus tosaigh
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Socraigh teaghlach cló go sans-serif, agus rialaigh méid, meáchan agus tosaigh
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Socraigh teaghlach cló go monaspás, agus rialú méid, meáchan, agus tosaigh

Córas greille

Meascán Paraiméadair Úsáid
.container-fixed() aon cheann Cruthaigh coimeádán cothrománach lárnach chun d'inneachar a choinneáil
#grid > .core() @gridColumnWidth, @gridGutterWidth Gin córas greille picteilín (coimeádán, ró, agus colúin) le n colún agus x gáitéir ar leithead picteilín
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Gin córas eangaí faoin gcéad le n colún agus x % gáitéir ar leithead
#grid > .input() @gridColumnWidth, @gridGutterWidth Gin an córas greille picteilín le haghaidh inputeilimintí, cuntasaíocht do stuáil agus teorainneacha
.makeColumn @columns: 1, @offset: 0 Tiontaigh aon cheann divisteach i gcolún greille gan na .span*ranganna

Airíonna CSS3

Meascán Paraiméadair Úsáid
.border-radius() @radius Timpeall coirnéil eilimint. Is féidir leis a bheith ina luach singil nó ina cheithre luach spásscartha
.box-shadow() @shadow Cuir scáth titim le eilimint
.transition() @transition Cuir éifeacht trasdula CSS3 leis (m.sh., all .2s linear)
.rotate() @degrees Rothlaigh eilimint n céim
.scale() @ratio Scála eilimint go n uair a méid bunaidh
.translate() @x, @y Bog dúil ar na plánaí x agus y
.background-clip() @clip Bearr cúlra dúil (úsáideach le haghaidh border-radius)
.background-size() @size Rialú ar mhéid na n-íomhánna cúlra trí CSS3
.box-sizing() @boxmodel Athraigh samhail an bhosca le haghaidh eiliminte (m.sh., border-boxle haghaidh leithead iomlán input)
.user-select() @select Rialú ar an rogha cúrsóra téacs ar leathanach
.backface-visibility() @visibility: visible Cosc a chur ar scealpadh inneachair agus claochluithe CSS 3D á n-úsáid
.resizable() @direction: both Déan aon eilimint a athmhéadú ar dheis agus ar bun
.content-columns() @columnCount, @columnGap: @gridGutterWidth Bain úsáid as colúin CSS3 as ábhar aon eilimint
.hyphens() @mode: auto hyphenation CSS3 nuair is mian leat é ( san áireamh word-wrap: break-word)

Cúlra agus grádáin

Meascán Paraiméadair Úsáid
#translucent > .background() @color: @white, @alpha: 1 Tabhair dath cúlra tréshoilseach d’eilimint
#translucent > .border() @color: @white, @alpha: 1 Tabhair dath teorann tréshoilseach d’eilimint
#gradient > .vertical() @startColor, @endColor Cruthaigh grádán cúlra ingearach trasbhrabhsálaí
#gradient > .horizontal() @startColor, @endColor Cruthaigh grádán cúlra cothrománach tras-bhrabhsálaí
#gradient > .directional() @startColor, @endColor, @deg Cruthaigh grádán cúlra treo trasbhrabhsálaí
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Cruthaigh grádán cúlra trí dhath tras-bhrabhsálaí
#gradient > .radial() @innerColor, @outerColor Cruthaigh grádán cúlra gathacha tras-bhrabhsálaí
#gradient > .striped() @color, @angle Cruthaigh grádán cúlra stríocach trasbhrabhsálaí
#gradientBar() @primaryColor, @secondaryColor Úsáidtear é le haghaidh cnaipí chun grádán agus teorainn beagán níos dorcha a shannadh
Nóta: Má tá iarratas tarraingthe á chur isteach agat chuig GitHub le CSS modhnaithe, ní mór duit an CSS a ath-thiomsú trí aon cheann de na modhanna seo.

Uirlisí le haghaidh tiomsú

Nód le makefile

Suiteáil an tiomsaitheoir líne ordaithe LESS, JSHint, Recess, agus uglify-js domhanda le npm tríd an ordú seo a leanas a rith:

$npm suiteáil -g níos lú jshint sos uglify-js

Nuair a bheidh tú suiteáilte, rith makeó fhréamh do eolaire bootstrap agus tá tú réidh.

Ina theannta sin, má tá faireoir suiteáilte agat, is féidir go n-athróidh tú make watchbootstrap go huathoibríoch gach uair a chuireann tú comhad in eagar sa lib bootstrap (níl gá leis seo, níl le déanamh ach modh áise).

Líne ordaithe

Suiteáil an uirlis líne ordaithe LESS trí Nód agus rith an t-ordú seo a leanas:

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

Bí cinnte a chur --compresssan ordú sin má tá tú ag iarraidh roinnt beart a shábháil!

Javascript

Íoslódáil na Less.js is déanaí agus cuir an cosán chuige (agus Bootstrap) san áireamh sa <head>.

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

Chun na comhaid .less a ath-thiomsú, níl le déanamh ach iad a shábháil agus do leathanach a athlódáil. Déanann Less.js iad a thiomsú agus a stóráil i stóráil áitiúil.

Aip neamhoifigiúil Mac

Féachann an aip neamhoifigiúil Mac ar eolairí de chomhaid .less agus tiomsaíonn sé an cód chuig comhaid áitiúla tar éis gach sábháil ar chomhad .less faire.

Más mian leat, is féidir leat sainroghanna a scoránaigh san aip le haghaidh mionú uathoibríoch agus cén t-eolaire a chríochnaíonn na comhaid tiomsaithe.

Tuilleadh apps Mac

Géarchor

Is eagarthóir agus tiomsaitheoir NÍOS chosúil é Crunch a tógadh ar Adobe Air.

CodeKit

Cruthaithe ag an bhfear céanna leis an aip neamhoifigiúil Mac, is app Mac é CodeKit a thiomsaíonn LESS, SASS, Stylus, agus CoffeeScript.

Simplí

Aip Mac, Linux, agus PC chun comhaid NÍOS LÚ a thiomsú agus a tharraingt. Ina theannta sin, tá an cód foinse ar GitHub .