Panagusar ti LESS iti Bootstrap

Ipasayaat ken palawaen ti Bootstrap babaen ti LESS , maysa a preprosesor ti CSS, tapno magundawayan dagiti variable, mixin, ken dadduma pay a maus-usar a mangbangon ti CSS ti Bootstrap.

Apay a BASSIT?

Ti Bootstrap ket naaramid nga addaan iti LESS iti kangrunaanna, maysa a dinamiko a pagsasao ti stylesheet a pinartuat babaen ti nasayaat a gayyemtayo, ni Alexis Sellier . Daytoy ket mangaramid ti panagparang-ay kadagiti sistema-a naibatay a CSS a naparpartak, nalaklaka, ken ad-adda a makaay-ayo.

Ania ti nairaman?

Kas maysa a panagpaatiddog ​​ti CSS, ti LESS ket mangiraman kadagiti variable, dagiti mixin para kadagiti mausar manen a snippet ti kodigo, dagiti panagpataray para iti simple a matematika, panagumok, ken urayno dagiti panagandar ti kolor.

Ammuem ti ad-adu pay

BASSIT A CSS

Bisitaen ti opisial a website iti http://lesscss.org/ tapno maammuan ti ad-adu pay.

Dagiti Variable

Ti panangituray kadagiti kolor ken dagiti pateg ti pixel iti CSS ket mabalin a bassit a saem, kadawyan a napno iti kopia ken i-paste. Saan a babaen ti LESS nupay kasta—ituding dagiti kolor wenno dagiti pateg ti pixel a kas dagiti variable ken baliwam dagitoy a maminsan.

Dagiti mixin

Dagita tallo a border-radius declarations a kasapulam nga aramiden iti regular ol' CSS? Ita ket bimmabadan iti maysa a linia babaen ti tulong dagiti mixin, dagiti snippet ti kodigo a mabalinmo nga usaren manen iti sadinoman.

Dagiti Operasion

Pagbalinem ti grid-mo, mangidadaulo, ken ad-adda a super flexible babaen ti panangaramid iti matematika iti tumatayab nga addaan kadagiti operasion. Paaduen, bingayen, inayon, ken kissayan ti dalanmo iti CSS sanity.

Andamio ken silpo

@bodyBackground @white Kolor ti likudan ti panid
@textColor @grayDark Default a kolor ti teksto para iti intero a bagi, paulo, ken dadduma pay
@linkColor #08c Default a kolor ti teksto ti silpo
@linkColorHover darken(@linkColor, 15%) Default a kolor ti hover ti teksto ti silpo

Sistema ti grid

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

Tipograpia

@sansFontFamily "Helvetica nga Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Mónaco, "Courier Baro", monoespacio
@baseFontSize 13px nga Masapul a pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px nga Masapul a pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Dagiti Lamisaan

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

Dagiti kolor nga grayscale

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

Dagiti kolor ti aksento

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

Dagiti paset

Dagiti Buton

@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

Dagiti Pormas

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

Pormaen dagiti estado ken alerto

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

Navbar nga

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

Dagiti dropdown

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

Bannuar nga yunit

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Maipapan kadagiti mixins

Dagiti kangrunaan a mixins

Ti batayan a mixin ket nasken a maysa a mairaman wenno ti paset para iti maysa a snippet ti CSS. Naisurat dagitoy a kasla klase ti CSS ken mabalin nga awagan iti sadinoman.

  1. . elemento nga { .
  2. . nalawag a panangtarimaan ();
  3. } nga

Dagiti parametriko a mixin

Ti parametriko a mixin ket kasla laeng ti batayan a mixin, ngem daytoy ket mangawat pay kadagiti parametro (gapuna ti nagan) nga addaan kadagiti pagpilian a default a pateg.

  1. . elemento nga { .
  2. . beddeng - radius ( 4px );
  3. } nga

Nalaka laeng nga inayon ti bukodmo

Dandani amin dagiti mixin ti Bootstrap ket naidulin kadagiti mixins.less, maysa a nakaskasdaaw a utilidad a .less a file a mangpabalin kenka nga agusar ti mixin iti ania man kadagiti .less a file iti toolkit.

Gapuna, sige ket usarem dagiti addan wenno agwayawayaka a mangnayon iti bukodmo kas kasapulam.

Nairaman dagiti mixins

Dagiti Utilities

Mixin nga Dagiti Parametro Panagusar
.clearfix() awan Inayon iti aniaman a nagannak tapno ma-clear dagiti float iti uneg
.tab-focus() awan Iyaplikar ti estilo ti pokus ti Webkit ken nagtimbukel a balabala ti Firefox
.center-block() awan Auto center ti maysa a bloke-level nga elemento nga agus-usarmargin: auto
.ie7-inline-block() awan Usaren malaksid iti regular display: inline-blocktapno makagun-od iti suporta ti IE7
.size() @height @width Napardas nga ikeddeng ti kangato ken kalawa iti maysa a linia
.square() @size Builds on .size()tapno mangikeddeng ti kalawa ken kangato a kas ti isu met laeng a pateg
.opacity() @opacity Itakderan, kadagiti sibubukel a numero, ti porsiento ti opasidad (kas pagarigan, "50" wenno "75") .

Dagiti Pormas

Mixin nga Dagiti Parametro Panagusar
.placeholder() @color: @placeholderText Itakderan ti placeholderkolor ti teksto para kadagiti input

Tipograpia

Mixin nga Dagiti Parametro Panagusar
#font > #family > .serif() awan Mangaramid ti maysa nga elemento nga agusar ti serif font stack
#font > #family > .sans-serif() awan Mangaramid ti maysa nga elemento nga agusar ti sans-serif a font stack
#font > #family > .monospace() awan Mangaramid ti maysa nga elemento nga agusar ti monospace font stack
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Nalaka nga i-set ti kadakkel ti font, kadagsen, ken leading
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Itakderan ti pamilia ti letra iti serif, ken kontrolen ti kadakkel, dagsen, ken leading
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Itakderan ti pamilia ti letra iti sans-serif, ken kontrolen ti kadakkel, dagsen, ken leading
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Itakderan ti pamilia ti letra iti monospace, ken kontrolen ti kadakkel, dagsen, ken mangidaulo

Sistema ti grid

Mixin nga Dagiti Parametro Panagusar
.container-fixed() awan Mangaramidka iti horizontally centered container para iti panangiggem iti linaonmo
#grid > .core() @gridColumnWidth, @gridGutterWidth Mangpataud ti sistema ti grid ti pixel (container, hilera, ken dagiti adigi) nga addaan kadagiti n nga adigi ken x pixel a kalawa a kanal
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Mangpataud ti porsiento a sistema ti grid nga addaan iti n nga adigi ken x % a nalawa a kanal
#grid > .input() @gridColumnWidth, @gridGutterWidth Mangpataud ti sistema ti pixel grid para kadagiti inputelemento, panagkuenta para iti padding ken dagiti beddeng
.makeColumn @columns: 1, @offset: 0 Pagbalinen ti aniaman diva grid column nga awan dagiti .span*klase

Dagiti tagikua ti CSS3

Mixin nga Dagiti Parametro Panagusar
.border-radius() @radius Timbukelan dagiti suli ti maysa nga elemento. Mabalin a maymaysa a pateg wenno uppat a pateg a naisina iti espasio
.box-shadow() @shadow Manginayon ti drop shadow iti maysa nga elemento
.transition() @transition Inayon ti epekto ti panagbalbaliw ti CSS3 (kas pagarigan, all .2s linear) .
.rotate() @degrees I-rotate ti maysa nga elemento n degrees
.scale() @ratio I-scale ti maysa nga elemento iti n a daras ti orihinal a kadakkelna
.translate() @x, @y Iyakar ti maysa nga elemento kadagiti plano ti x ken y
.background-clip() @clip Putden ti likudan ti maysa nga elemento (mausar para iti border-radius) .
.background-size() @size Kontrolem ti kadakkel dagiti ladawan ti likudan babaen ti CSS3
.box-sizing() @boxmodel Baliwan ti modelo ti kahon para iti maysa nga elemento (kas pagarigan, border-boxpara iti naan-anay a kalawa input) .
.user-select() @select Kontrolem ti panagpili ti kursor ti teksto iti maysa a panid
.backface-visibility() @visibility: visible Lapdan ti panagkidem ti linaon no agusar kadagiti CSS 3D a panagbalbaliw
.resizable() @direction: both Aramiden ti aniaman nga elemento a mabaliwan ti kadakkelna iti kannawan ken baba
.content-columns() @columnCount, @columnGap: @gridGutterWidth Aramiden ti linaon ti ania man nga elemento nga agusar kadagiti kolum ti CSS3
.hyphens() @mode: auto CSS3 hyphenation no kayatmo (iraman ti word-wrap: break-word) .

Dagiti likudan ken gradient

Mixin nga Dagiti Parametro Panagusar
#translucent > .background() @color: @white, @alpha: 1 Ikkan ti maysa nga elemento iti translucent a kolor ti likudan
#translucent > .border() @color: @white, @alpha: 1 Ikkan ti maysa nga elemento iti translucent a kolor ti beddeng
#gradient > .vertical() @startColor, @endColor Mangaramid ti krus-browser a bertikal a background gradient
#gradient > .horizontal() @startColor, @endColor Mangaramid ti krus-browser a horizontal a background gradient
#gradient > .directional() @startColor, @endColor, @deg Mangaramid ti krus-browser a direksion a likudan a gradient
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Mangaramid ti krus-browser a tallo a kolor a background gradient
#gradient > .radial() @innerColor, @outerColor Mangaramid ti krus-browser a radial a likudan a gradient
#gradient > .striped() @color, @angle Mangaramid ti krus-browser a garitgaritan a background gradient
#gradientBar() @primaryColor, @secondaryColor Nausar para kadagiti buton a mangituding iti gradient ken nasipnget bassit a beddeng
Pakaammo: No mangisubmitir ka ti kiddaw ti panagguyod iti GitHub nga addaan iti nabaliwan a CSS, masapul a mangtipon manen ti CSS babaen ti ania man kadagitoy a pamay-an.

Dagiti ramit para iti panagtipon

Nodo nga addaan iti makefile

I-install ti LESS a linia ti bilin a kompiler, JSHint, Recess, ken uglify-js a sangalubongan babaen ti npm babaen ti panangipataray ti sumaganad a bilin:

$ npm mangikabil -g basbassit jshint recess uglify-js

Apaman a nai-install ket agtarayka laeng makemanipud iti ramut ti bootstrap directory-mo ket nakasaganaka amin.

Mainayon pay, no addaanka iti watchr a naikabil, mabalinmo ti agtaray make watchtapno ti bootstrap ket automatiko a maibangon manen tunggal maysa nga i-editmo ti maysa a papeles iti bootstrap lib (daytoy ket saan a kasapulan, maysa laeng a pamay-an ti kombeniente).

Linya ti bilin

I-install ti ramit ti linia ti bilin ti LESS babaen ti Node ken patarayen ti sumaganad a bilin:

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

Siguraduenyo nga iraman --compressiti dayta a bilin no padpadasem nga i-save ti sumagmamano a byte!

Javascript nga isurat

I-download ti kaudian a Less.js ken iraman ti dalan nga agturong iti dayta (ken Bootstrap) iti <head>.

<link rel = "stylesheet/basbassit" href = "/dalan/agingga/bootstrap.basbassit" > <script src = "/dalan/iti/basbassit.js" ></script>  
 

Tapno maurnong manen dagiti .less a file, i-save laeng dagitoy ken ikarga manen ti panidmo. Ti Less.js ket mangtipon kadagitoy ken mangidulin kadagitoy iti lokal a pagipempenan.

Di opisial nga app ti Mac

Ti saan nga opisial a Mac app ket mangbuybuya kadagiti direktorio dagiti .less a file ken mangtipon iti kodigo kadagiti lokal a file kalpasan ti tunggal panagidulin ti nabuya a .less a file.

No kayatmo, mabalinmo nga i-toggle dagiti preferences iti app para iti automatic minifying ken no ania a direktorio ti pagtungpalan dagiti naurnong a file.

Ad-adu pay nga app ti Mac

Crunch nga

Ti Crunch ket maysa a nagsayaat ti langana a LESS editor ken compiler a naibangon iti Adobe Air.

CodeKit nga

Pinartuat ti isu met laeng a lalaki a kas iti saan nga opisial a Mac app, ti CodeKit ket maysa a Mac app a mangtipon iti LESS, SASS, Stylus, ken CoffeeScript.

Awan Simple

Mac, Linux, ken PC app para iti drag and drop a panagtipon kadagiti LESS a file. Plus, ti taudan a kodigo ket adda iti GitHub .