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.
Pastatyta su LESS
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ą.
Bootstrap kintamieji MAžiau kintamųjų, jų reikšmės ir naudojimo gairės
Hipersaitai
@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
@baseFontSize |
13 piks |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 pikselių |
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
@primaryButtonBackground |
@linkColor |
Formos
@placeholderText |
@grayLight |
Navigacijos juosta
@navbarHeight |
40 piks | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Formos būsenos ir įspėjimai
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87skelbimas | |
@infoBackground |
#d9edf7 |
Bootstrap miksai
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ą naudodamimargin: auto |
.ie7-inline-block() |
nė vienas | Naudokite ne tik įprastą display: inline-block, bet ir gaukite IE7 palaikymą |
.size() |
@height: 5px, @width: 5px |
Greitai nustatykite aukštį ir plotį vienoje eilutėje |
.square() |
@size: 5px |
Pastato, .size()kad plotis ir aukštis būtų vienodos vertės |
.opacity() |
@opacity: 100 |
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 precent tinklelio sistemą su n stulpelių ir x % pločio latako |
CSS3 savybės
| Sumaišyti | Parametrai | Naudojimas |
|---|---|---|
.border-radius() |
@radius: 5px |
Suapvalinkite elemento kampus. Gali būti viena reikšmė arba keturios tarpais atskirtos reikšmės |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Padarykite bet kurio elemento dydį dešinėje ir apačioje |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Bet kurio elemento turinys turi naudoti CSS3 stulpelius |
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 |
Bootstrap kompiliavimas naudojant LESS
Kompiliavimo įrankiai
Mazgas su makefile
Įdiekite LESS komandų eilutės kompiliatorių ir uglify-js visame pasaulyje naudodami npm, vykdydami šią komandą:
$ npm install -g less 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 ./lib/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“ .