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.

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.

Telineet ja linkit

`@bodyBackground`	`@white`	Sivun taustaväri
`@textColor`	`@grayDark`	Tekstin oletusväri koko tekstille, otsikoille ja muille
`@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

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", yksitila
`@baseFontSize`	13px	Täytyy olla pikseleitä
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Täytyy olla pikseleitä
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Taulukot

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

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

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

Lomakkeet

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

Lomaketilat ja hälytykset

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

Navbar

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

Pudotusvalikosta

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

Sankariyksikkö

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

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-block`saadaksesi IE7-tuen
`.size()`	`@height @width`	Aseta korkeus ja leveys nopeasti yhdelle riville
`.square()`	`@size`	Rakentuu `.size()`asettamaan leveyden ja korkeuden samaksi arvoksi
`.opacity()`	`@opacity`	Aseta peittävyysprosentti kokonaislukuina (esim. "50" tai "75")

Lomakkeet

Sekoita joukkoon	Parametrit	Käyttö
`.placeholder()`	`@color: @placeholderText`	Aseta `placeholder`syö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`	Aseta 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
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Luo pikseliruudukkojärjestelmä `input`elementeille huomioimalla täyte ja reunukset
`.makeColumn`	`@columns: 1, @offset: 0`	Muuta mikä tahansa `div`ruudukkosarakkeeksi ilman `.span*`luokkia

CSS3-ominaisuudet

Sekoita joukkoon	Parametrit	Käyttö
`.border-radius()`	`@radius`	Pyöristä elementin kulmat. Voi olla yksi arvo tai neljä välilyönnillä erotettua arvoa
`.box-shadow()`	`@shadow`	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, @y`	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-box`täysleveälle `input`)
`.user-select()`	`@select`	Ohjaa kohdistimen tekstin valintaa sivulla
`.backface-visibility()`	`@visibility: visible`	Estä sisällön välkkyminen CSS 3D -muunnoksia käytettäessä
`.resizable()`	`@direction: both`	Tee minkä tahansa elementin kokoa muutettava oikealta ja alapuolelta
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	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

Huomautus: Jos lähetät vetopyynnön GitHubille muokatun CSS:n kanssa, sinun on käännettävä CSS uudelleen jollakin näistä tavoista.

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 watchbootstrapin automaattisen uudelleenrakentamisen 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 ./less/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.

Rakennettu vähemmällä

Miksi VÄHEMMÄN?

Mitä sisältyy?

Lue lisää

Muuttujat

Seokset

Toiminnot

Bootstrap-muuttujat VÄHEMMÄN muuttujia, niiden arvot ja käyttöohjeet

Telineet ja linkit

Verkkojärjestelmä

Typografia

Taulukot

Harmaasävyvärit

Aksenttivärit

Komponentit

Painikkeet

Lomakkeet

Lomaketilat ja hälytykset

Navbar

Pudotusvalikosta

Sankariyksikkö

Bootstrap mixins

Tietoja mixineistä

Perussekoitukset

Parametriset sekoitukset

Lisää omasi helposti

Mukana mixinejä

Apuohjelmat

Lomakkeet

Typografia

Verkkojärjestelmä

CSS3-ominaisuudet

Taustat ja gradientit

Bootstrapin kääntäminen LESSillä

Työkaluja kokoamiseen

Solmu, jossa on makefile

Komentorivi

Javascript

Epävirallinen Mac-sovellus

Lisää Mac-sovelluksia

Crunch

CodeKit

Yksinkertaista