LESS-käyttö Bootstrapin kanssa
Mukauta ja laajenna Bootstrapia LESS :llä , CSS-esiprosessorilla, jotta voit hyödyntää Bootstrapin CSS:n rakentamiseen käytettyjä muuttujia, sekoituksia ja muuta.
Rakennettu vähemmällä
Miksi VÄHEMMÄN?
Bootstrapin ytimessä on LESS, dynaaminen tyylitaulukkokieli, jonka on luonut hyvä ystävämme Alexis Sellier . Se tekee järjestelmäpohjaisen CSS:n kehittämisestä nopeampaa, helpompaa ja hauskempaa.
Mitä sisältyy?
CSS:n laajennuksena LESS sisältää muuttujia, uudelleenkäytettävien koodinpätkien sekoituksia, yksinkertaista matematiikkaa, sisäkkäistoimintoja ja jopa värifunktioita.
Lue lisää
Vieraile virallisella verkkosivustolla osoitteessa http://lesscss.org/ saadaksesi lisätietoja.
Muuttujat
Värien ja pikseliarvojen hallinta CSS:ssä voi olla hieman tuskaa, yleensä täynnä kopioimista ja liittämistä. Ei kuitenkaan VÄHEMMÄN kanssa – määritä värit tai pikseliarvot muuttujiksi ja muuta niitä kerran.
Seokset
Ne kolme rajasäteen ilmoitusta, jotka sinun on tehtävä tavallisessa vanhassa CSS:ssä? Nyt ne ovat yhdelle riville mixinien avulla, koodinpätkiä, joita voit käyttää uudelleen missä tahansa.
Toiminnot
Tee ruudukostasi, johdostasi ja erittäin joustavammaksi tekemällä laskutoimitukset lennossa. Kerro, jaa, lisää ja vähennä tapasi CSS-järkeyden saavuttamiseksi.
Bootstrap-muuttujat VÄHEMMÄN muuttujia, niiden arvot ja käyttöohjeet
Hyperlinkit
@linkColor |
#08c | Linkin tekstin oletusväri | |
@linkColorHover |
darken(@linkColor, 15%) |
Linkin tekstin oletusväri |
Verkkojärjestelmä
@gridColumns |
12 |
@gridColumnWidth |
60 pikseliä |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6,382978723 % |
@fluidGridGutterWidth |
2,127659574 % |
Typografia
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Harmaasävyvärit
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#F F F |
Aksenttivärit
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponentit
Painikkeet
@primaryButtonBackground |
@linkColor |
Lomakkeet
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40 pikseliä | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Lomaketilat ja hälytykset
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87mainos | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
Tietoja mixineistä
Perussekoitukset
Perussekoitus on pohjimmiltaan CSS-koodinpätkän sisällyttäminen tai osa. Ne on kirjoitettu aivan kuten CSS-luokka ja niitä voidaan kutsua missä tahansa.
- . element {
- . clearfix ();
- }
Parametriset sekoitukset
Parametrinen mixin on aivan kuten perusmixin, mutta se hyväksyy myös parametrit (siis nimi) valinnaisilla oletusarvoilla.
- . element {
- . reunus - säde ( 4px );
- }
Lisää omasi helposti
Lähes kaikki Bootstrapin mixinit on tallennettu mixins.less-tiedostoon, joka on upea apuohjelma .less-tiedosto, jonka avulla voit käyttää mixinia missä tahansa työkalupakin .less-tiedostossa.
Käytä siis olemassa olevia tai lisää omasi tarpeen mukaan.
Mukana mixinejä
Apuohjelmat
| Sekoita joukkoon | Parametrit | Käyttö |
|---|---|---|
.clearfix() |
ei mitään | Lisää mihin tahansa vanhempiin tyhjentääksesi kelluvat sisällä |
.tab-focus() |
ei mitään | Käytä Webkit-tarkennustyyliä ja pyöristä Firefoxin ääriviivat |
.center-block() |
ei mitään | Keskitä lohkotason elementti automaattisesti käyttämällämargin: auto |
.ie7-inline-block() |
ei mitään | Käytä tavallisen lisäksi display: inline-blocksaadaksesi IE7-tuen |
.size() |
@height: 5px, @width: 5px |
Aseta korkeus ja leveys nopeasti yhdelle riville |
.square() |
@size: 5px |
Rakentuu .size()asettamaan leveyden ja korkeuden samaksi arvoksi |
.opacity() |
@opacity: 100 |
Aseta peittävyysprosentti kokonaislukuina (esim. "50" tai "75") |
Lomakkeet
| Sekoita joukkoon | Parametrit | Käyttö |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Aseta placeholdersyötteiden tekstin väri |
Typografia
| Sekoita joukkoon | Parametrit | Käyttö |
|---|---|---|
#font > #family > .serif() |
ei mitään | Aseta elementti käyttämään serif-fonttipinoa |
#font > #family > .sans-serif() |
ei mitään | Aseta elementti käyttämään sans-serif-fonttipinoa |
#font > #family > .monospace() |
ei mitään | Aseta elementti käyttämään yksivälistä fonttipinoa |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Säädä helposti fontin koko, paino ja aloitus |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Aseta kirjasinperhe serifiksi ja hallitse kokoa, painoa ja alkua |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Aseta kirjasinperhe sans-serif-tilaan ja säädä kokoa, painoa ja alkua |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Aseta kirjasinperhe monospace-tilaan ja hallitse kokoa, painoa ja alkua |
Verkkojärjestelmä
| Sekoita joukkoon | Parametrit | Käyttö |
|---|---|---|
.container-fixed() |
ei mitään | Luo vaakasuoraan keskitetty säiliö sisällön säilyttämistä varten |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Luo pikseliruudukkojärjestelmä (säiliö, rivi ja sarakkeet), jossa on n saraketta ja x pikseliä leveä kouru |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Luo uusi ruudukkojärjestelmä, jossa on n pylvästä ja x % leveä kouru |
CSS3-ominaisuudet
| Sekoita joukkoon | Parametrit | Käyttö |
|---|---|---|
.border-radius() |
@radius: 5px |
Pyöristä elementin kulmat. Voi olla yksi arvo tai neljä välilyönnillä erotettua arvoa |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Lisää varjon elementtiin |
.transition() |
@transition |
Lisää CSS3-siirtymätehoste (esim. all .2s linear) |
.rotate() |
@degrees |
Kierrä elementtiä n astetta |
.scale() |
@ratio |
Skaalaa elementti n - kertaiseksi sen alkuperäiseen kokoon |
.translate() |
@x: 0, @y: 0 |
Siirrä elementtiä x- ja y-tasoilla |
.background-clip() |
@clip |
Rajaa elementin tausta (hyödyllinen border-radius) |
.background-size() |
@size |
Hallitse taustakuvien kokoa CSS3:n kautta |
.box-sizing() |
@boxmodel |
Muuta elementin laatikkomallia (esim. border-boxtäysleveälle input) |
.user-select() |
@select |
Ohjaa kohdistimen tekstin valintaa sivulla |
.resizable() |
@direction: both |
Tee minkä tahansa elementin kokoa muutettava oikealta ja alapuolelta |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Käytä minkä tahansa elementin sisältöön CSS3-sarakkeita |
Taustat ja gradientit
| Sekoita joukkoon | Parametrit | Käyttö |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Anna elementille läpikuultava taustaväri |
#translucent > .border() |
@color: @white, @alpha: 1 |
Anna elementille läpikuultava reunaväri |
#gradient > .vertical() |
@startColor, @endColor |
Luo selainten välinen pystysuora taustagradientti |
#gradient > .horizontal() |
@startColor, @endColor |
Luo selainten välinen vaakasuuntainen taustagradientti |
#gradient > .directional() |
@startColor, @endColor, @deg |
Luo selainsuuntainen taustagradientti |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Luo selaimen välinen kolmivärinen taustagradientti |
#gradient > .radial() |
@innerColor, @outerColor |
Luo selaimen välinen säteittäinen taustagradientti |
#gradient > .striped() |
@color, @angle |
Luo selainten välinen raidallinen taustagradientti |
#gradientBar() |
@primaryColor, @secondaryColor |
Käytetään painikkeille kaltevuuden ja hieman tummemman reunuksen määrittämiseen |
Bootstrapin kääntäminen LESSillä
Työkaluja kokoamiseen
Solmu, jossa on makefile
Asenna VÄHEMMÄN komentorivin kääntäjä ja uglify-js maailmanlaajuisesti npm:llä suorittamalla seuraava komento:
$ npm install -g less uglify-js
Kun olet asentanut, suorita makekäynnistyshakemistosi juurista ja olet valmis.
Lisäksi, jos sinulla on watchr asennettuna, voit suorittaa make watchkäynnistyksen automaattisen uudelleen rakentamisen aina, kun muokkaat tiedostoa bootstrap libissä (tätä ei vaadita, vain mukavuusmenetelmä).
Komentorivi
Asenna VÄHEMMÄN komentorivityökalu Noden kautta ja suorita seuraava komento:
$ lessc ./lib/bootstrap.less > bootstrap.css
Muista sisällyttää --compresstämä komento, jos yrität tallentaa tavuja!
Javascript
Lataa uusin Less.js ja lisää sen polku (ja Bootstrap) tiedostoon <head>.
<link rel = "tyylitaulukko/vähemmän" href = "/polku/bootstrap.less" > <script src = "/polku/vähemmän.js:iin" ></script>
Voit kääntää .less-tiedostot uudelleen tallentamalla ne ja lataamalla sivusi uudelleen. Less.js kokoaa ne ja tallentaa ne paikalliseen tallennustilaan.
Epävirallinen Mac-sovellus
Epävirallinen Mac-sovellus tarkkailee .less-tiedostojen hakemistoja ja kokoaa koodin paikallisiksi tiedostoiksi jokaisen katsotun .less-tiedoston tallennuksen jälkeen.
Voit halutessasi vaihtaa sovelluksessa automaattisen pienennyksen asetuksia ja valita, mihin hakemistoon käännetyt tiedostot päätyvät.
Lisää Mac-sovelluksia
Crunch
Crunch on upean näköinen LESS-editori ja kääntäjä, joka on rakennettu Adobe Airiin.
CodeKit
Saman kaverin luoma kuin epävirallinen Mac-sovellus, CodeKit on Mac-sovellus, joka kokoaa LESS-, SASS-, Stylus- ja CoffeeScript-tiedostoja.
Yksinkertaista
Mac-, Linux- ja PC-sovellus VÄHEMMÄN tiedostojen kääntämiseen vedä ja pudottamalla. Lisäksi lähdekoodi on GitHubissa .