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ää

VÄHEMMÄN CSS:ää

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

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

Parametriset sekoitukset

Parametrinen mixin on aivan kuten perusmixin, mutta se hyväksyy myös parametrit (siis nimi) valinnaisilla oletusarvoilla.

  1. . element {
  2. . reunus - säde ( 4px );
  3. }

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 @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 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 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 prosenttiruudukkojärjestelmä, jossa on n pylvästä ja x % leveä kouru
#grid > .input() @gridColumnWidth, @gridGutterWidth Luo pikseliruudukkojärjestelmä inputelementeille huomioimalla täyte ja reunukset
.makeColumn @columns: 1, @offset: 0 Muuta mikä tahansa divruudukkosarakkeeksi 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-boxtä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
.hyphens() @mode: auto CSS3-tavutus halutessasi (sisältää word-wrap: break-word)

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ä, JSHint, Recess ja uglify-js maailmanlaajuisesti npm:llä suorittamalla seuraava komento:

$ npm install -g vähemmän jshint syvennys 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.

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 .