Naudojant LESS su Bootstrap

Tinkinkite ir išplėskite „Bootstrap“ naudodami LESS , CSS išankstinį procesorių, kad galėtumėte pasinaudoti kintamaisiais, deriniais ir dar daugiau, naudojamų kuriant „Bootstrap“ CSS.

Kodėl MAŽIAU?

„Bootstrap“ sukurta naudojant LESS – dinamišką stilių lentelių kalbą, kurią sukūrė mūsų geras draugas Alexis Sellier . Tai leidžia kurti sistemomis pagrįstą CSS greičiau, lengviau ir smagiau.

Kas įtraukta?

Kaip CSS plėtinys, LESS apima kintamuosius, daugkartinio naudojimo kodo fragmentų mišinius, paprastas matematikos operacijas, įdėjimą ir net spalvų funkcijas.

Sužinokite daugiau

Norėdami sužinoti daugiau , apsilankykite oficialioje svetainėje http://lesscss.org/ .

Kintamieji

CSS spalvų ir pikselių reikšmių tvarkymas gali būti šiek tiek skausmingas, paprastai nukopijuoti ir įklijuoti. Tačiau ne su LESS – priskirkite spalvas arba pikselių reikšmes kaip kintamuosius ir vieną kartą pakeiskite.

Mišiniai

Tos trys sienos spindulio deklaracijos, kurias turite pateikti įprastoje senojoje CSS? Dabar jie yra suskirstyti į vieną eilutę, naudodami mišinius, kodo fragmentus, kuriuos galite pakartotinai naudoti bet kur.

Operacijos

Padarykite savo tinklelį, pirmaujantį ir ypač lankstesnį atlikdami matematikos operacijas. Padauginkite, padalykite, pridėkite ir atimkite savo kelią į CSS protingumą.

Pastoliai ir jungtys

`@bodyBackground`	`@white`	Puslapio fono spalva
`@textColor`	`@grayDark`	Numatytoji viso teksto, antraščių ir kt. teksto spalva
`@linkColor`	`#08c`	Numatytoji nuorodos teksto spalva
`@linkColorHover`	`darken(@linkColor, 15%)`	Numatytoji nuorodos teksto spalva

Tinklelio sistema

`@gridColumns`	12
`@gridColumnWidth`	60 piks
`@gridGutterWidth`	20 piks
`@fluidGridColumnWidth`	6,382978723 %
`@fluidGridGutterWidth`	2,127659574 %

Tipografija

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monakas, "Courier New", monospace
`@baseFontSize`	13 piks	Turi būti pikselių
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 pikselių	Turi būti pikselių
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Lentelės

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

Pilkos spalvos spalvos

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

Akcentinės spalvos

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

Komponentai

Mygtukai

`@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`

Formos

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

Formos būsenos ir įspėjimai

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

Navigacijos juosta

`@navbarHeight`	40 piks
`@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`

Išskleidžiamieji meniu

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

Herojaus vienetas

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Apie miksus

Pagrindiniai mišiniai

Pagrindinis maišymas iš esmės yra CSS fragmento įtraukimas arba jo dalis. Jie parašyti kaip CSS klasė ir gali būti iškviesti bet kur.

. elementas {
  . clearfix ();
}

Parametriniai mišiniai

Parametrinis maišymas yra kaip pagrindinis miksas, tačiau jis taip pat priima parametrus (taigi ir pavadinimą) su pasirenkamomis numatytosiomis reikšmėmis.

. elementas {
  . kraštinė - spindulys ( 4px );
}

Lengvai pridėkite savo

Beveik visi „Bootstrap“ rinkiniai yra saugomi mixins.less, nuostabiame „.less“ faile, leidžiančiame naudoti „mixin“ bet kuriame įrankių rinkinyje esančiame .less faile.

Taigi, eikite į priekį ir naudokite esamus arba nedvejodami pridėkite savo.

Įtraukti mišiniai

Komunalinės paslaugos

Sumaišyti	Parametrai	Naudojimas
`.clearfix()`	nė vienas	Pridėkite prie bet kurio iš tėvų, kad išvalytumėte viduje esančias plūdes
`.tab-focus()`	nė vienas	Taikykite Webkit fokusavimo stilių ir apvalinkite Firefox kontūrą
`.center-block()`	nė vienas	Automatiškai centruokite bloko lygio elementą naudodami`margin: auto`
`.ie7-inline-block()`	nė vienas	Naudokite ne tik įprastą `display: inline-block`, bet ir gaukite IE7 palaikymą
`.size()`	`@height @width`	Greitai nustatykite aukštį ir plotį vienoje eilutėje
`.square()`	`@size`	Pastato, `.size()`kad plotis ir aukštis būtų vienodos vertės
`.opacity()`	`@opacity`	Sveikais skaičiais nustatykite neskaidrumo procentą (pvz., „50“ arba „75“)

Formos

Sumaišyti	Parametrai	Naudojimas
`.placeholder()`	`@color: @placeholderText`	Nustatykite `placeholder`įvesties teksto spalvą

Tipografija

Sumaišyti	Parametrai	Naudojimas
`#font > #family > .serif()`	nė vienas	Padarykite elementą naudodami serif šriftų krūvą
`#font > #family > .sans-serif()`	nė vienas	Padarykite elementą naudodami sans-serif šriftų krūvą
`#font > #family > .monospace()`	nė vienas	Padarykite elementą naudodami monospace šriftų krūvą
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Lengvai nustatykite šrifto dydį, svorį ir pirmąją eilutę
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nustatykite šriftų šeimą į serifą ir valdykite dydį, svorį ir pirmaujančią vietą
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nustatykite šriftų šeimą į sans-serif ir valdykite dydį, svorį ir pirmąją vietą
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nustatykite šriftų šeimą į monospace ir valdykite dydį, svorį ir pirmąją vietą

Tinklelio sistema

Sumaišyti	Parametrai	Naudojimas
`.container-fixed()`	nė vienas	Sukurkite horizontaliai centre esantį konteinerį savo turiniui laikyti
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Sukurkite pikselių tinklelio sistemą (konteineris, eilutė ir stulpeliai) su n stulpelių ir x pikselių pločio lataku
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Sukurkite procentų tinklelio sistemą su n stulpelių ir x % pločio lataku
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Sukurkite elementų pikselių tinklelio sistemą `input`, atsižvelgdami į užpildymą ir kraštines
`.makeColumn`	`@columns: 1, @offset: 0`	Bet kurį paverskite `div`tinklelio stulpeliu be `.span*`klasių

CSS3 savybės

Sumaišyti	Parametrai	Naudojimas
`.border-radius()`	`@radius`	Suapvalinkite elemento kampus. Gali būti viena reikšmė arba keturios tarpais atskirtos reikšmės
`.box-shadow()`	`@shadow`	Pridėkite šešėlį prie elemento
`.transition()`	`@transition`	Pridėti CSS3 perėjimo efektą (pvz., `all .2s linear`)
`.rotate()`	`@degrees`	Pasukite elementą n laipsnių
`.scale()`	`@ratio`	Padidinkite elemento mastelį iki n kartų didesnio už pradinį dydį
`.translate()`	`@x, @y`	Perkelkite elementą x ir y plokštumose
`.background-clip()`	`@clip`	Apkarpyti elemento foną (naudinga `border-radius`)
`.background-size()`	`@size`	Kontroliuokite fono vaizdų dydį naudodami CSS3
`.box-sizing()`	`@boxmodel`	Pakeiskite elemento dėžutės modelį (pvz., `border-box`viso pločio `input`)
`.user-select()`	`@select`	Valdykite žymeklio teksto pasirinkimą puslapyje
`.backface-visibility()`	`@visibility: visible`	Apsaugokite nuo turinio mirgėjimo, kai naudojate CSS 3D transformacijas
`.resizable()`	`@direction: both`	Padarykite bet kurio elemento dydį dešinėje ir apačioje
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Bet kurio elemento turinys turi naudoti CSS3 stulpelius
`.hyphens()`	`@mode: auto`	CSS3 brūkšnelis, kai to norite (apima `word-wrap: break-word`)

Fonai ir gradientai

Sumaišyti	Parametrai	Naudojimas
`#translucent > .background()`	`@color: @white, @alpha: 1`	Suteikite elementui permatomo fono spalvą
`#translucent > .border()`	`@color: @white, @alpha: 1`	Suteikite elementui permatomos kraštinės spalvą
`#gradient > .vertical()`	`@startColor, @endColor`	Sukurkite kelių naršyklių vertikalų fono gradientą
`#gradient > .horizontal()`	`@startColor, @endColor`	Sukurkite horizontalų fono gradientą tarp naršyklių
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Sukurkite tarp naršyklių nukreiptą fono gradientą
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Sukurkite kelių naršyklių trijų spalvų fono gradientą
`#gradient > .radial()`	`@innerColor, @outerColor`	Sukurkite radialinį fono gradientą tarp naršyklių
`#gradient > .striped()`	`@color, @angle`	Sukurkite kelių naršyklių dryžuotą fono gradientą
`#gradientBar()`	`@primaryColor, @secondaryColor`	Naudojamas mygtukams gradientui ir šiek tiek tamsesnei kraštinei priskirti

Pastaba: jei pateikiate ištraukimo užklausą „GitHub“ naudodami pakeistą CSS, turite iš naujo kompiliuoti CSS naudodami bet kurį iš šių metodų.

Kompiliavimo įrankiai

Mazgas su makefile

Įdiekite LESS komandinės eilutės kompiliatorių, JSHint, Recess ir uglify-js globaliai naudodami npm, vykdydami šią komandą:

$ npm install -g less jshint recess uglify-js

Įdiegę tiesiog paleiskite makeįkrovos katalogo šaknį ir viskas.

Be to, jei turite įdiegtą stebėjimo programą, galite paleisti make watch, kad įkrovos failas būtų automatiškai atkurtas kiekvieną kartą, kai redaguojate failą įkrovos lib.

Komandinė eilutė

Įdiekite LESS komandų eilutės įrankį per Node ir paleiskite šią komandą:

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

Būtinai įtraukite --compressį šią komandą, jei bandote išsaugoti keletą baitų!

Javascript

Atsisiųskite naujausią Less.js ir įtraukite kelią į jį (ir „Bootstrap“) į <head>.

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

Norėdami iš naujo sukompiliuoti .less failus, tiesiog išsaugokite juos ir įkelkite puslapį iš naujo. Less.js juos sukompiliuoja ir išsaugo vietinėje saugykloje.

Neoficiali „Mac“ programa

Neoficiali „Mac“ programa stebi .less failų katalogus ir sukompiliuoja kodą į vietinius failus po kiekvieno žiūrimo .less failo išsaugojimo.

Jei norite, programoje galite perjungti nuostatas, skirtas automatiniam sumažinimui ir į kurį katalogą pateks sukurti failai.

Pastatyta su LESS

Kodėl MAŽIAU?

Kas įtraukta?

Sužinokite daugiau

Kintamieji

Mišiniai

Operacijos

Bootstrap kintamieji MAžiau kintamųjų, jų reikšmės ir naudojimo gairės

Pastoliai ir jungtys

Tinklelio sistema

Tipografija

Lentelės

Pilkos spalvos spalvos

Akcentinės spalvos

Komponentai

Mygtukai

Formos

Formos būsenos ir įspėjimai

Navigacijos juosta

Išskleidžiamieji meniu

Herojaus vienetas

Bootstrap miksai

Apie miksus

Pagrindiniai mišiniai

Parametriniai mišiniai

Lengvai pridėkite savo

Įtraukti mišiniai

Komunalinės paslaugos

Formos

Tipografija

Tinklelio sistema

CSS3 savybės

Fonai ir gradientai

Bootstrap kompiliavimas naudojant LESS

Kompiliavimo įrankiai

Mazgas su makefile

Komandinė eilutė

Javascript

Neoficiali „Mac“ programa

Daugiau „Mac“ programų

Traškėti

CodeKit

Paprasta