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

MAŽIAU CSS

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.

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

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.

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

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ą naudodamimargin: 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 divtinklelio 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-boxviso 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.

Daugiau „Mac“ programų

Traškėti

Crunch yra puikiai atrodantis LESS redaktorius ir kompiliatorius, sukurtas naudojant „Adobe Air“.

CodeKit

Sukurtas to paties vaikino kaip ir neoficialią „Mac“ programą, „CodeKit“ yra „Mac“ programa, kuri kompiliuoja LESS, SASS, Stylus ir CoffeeScript.

Paprasta

„Mac“, „Linux“ ir asmeniniams kompiuteriams skirta programa, skirta MAUŽIŲ failų kompiliavimui. Be to, šaltinio kodas yra „GitHub“ .