A LESS használata a Bootstrap segítségével

A Bootstrap testreszabása és bővítése a LESS CSS-előfeldolgozóval, hogy kihasználhassa a Bootstrap CSS-jének felépítéséhez használt változókat, keverőket és egyebeket.

Miért KEVESEBB?

A Bootstrap középpontjában a LESS áll, egy dinamikus stíluslapnyelv, amelyet jó barátunk, Alexis Sellier hozott létre . Gyorsabbá, egyszerűbbé és szórakoztatóbbá teszi a rendszeralapú CSS fejlesztését.

Mit tartalmaz?

A CSS kiterjesztéseként a LESS változókat, mixineket az újrafelhasználható kódrészletekhez, egyszerű matematikai műveleteket, egymásba ágyazást és még színfüggvényeket is tartalmaz.

Tudj meg többet

További információért látogasson el a hivatalos weboldalra a http://lesscss.org/ címen .

Változók

A színek és a pixelértékek CSS-ben történő kezelése egy kicsit fájdalmas lehet, általában tele másolással és beillesztéssel. A LESS-szel azonban nem – rendeljen hozzá színeket vagy pixelértékeket változóként, és egyszer módosítsa őket.

Mixins

Az a három határsugár-deklaráció, amit meg kell tennie a szokásos régi CSS-ben? Mostanra egy sorra fogynak a mixinek, a kódrészletek segítségével, amelyeket bárhol újra felhasználhat.

Tevékenységek

Tedd rácsodat, vezetővé és szuperrugalmasabbá azáltal, hogy menet közben számolsz a műveletekkel. Szorzás, osztás, összeadás és kivonás a CSS józanságához.

Állványok és linkek

`@bodyBackground`	`@white`	Oldal háttérszíne
`@textColor`	`@grayDark`	Alapértelmezett szövegszín a teljes szöveghez, a címsorokhoz és egyebekhez
`@linkColor`	`#08c`	Alapértelmezett linkszöveg színe
`@linkColorHover`	`darken(@linkColor, 15%)`	Alapértelmezett linkszöveg mutató színe

Rács rendszer

`@gridColumns`	12
`@gridColumnWidth`	60 képpont
`@gridGutterWidth`	20 képpont
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Tipográfia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13 képpont	Képpontoknak kell lenniük
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 képpont	Képpontoknak kell lenniük
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Táblázatok

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

Szürkeárnyalatos színek

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

Kiemelt színek

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Alkatrészek

Gombok

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

Űrlapok

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

Űrlapállapotok és figyelmeztetések

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

Navbar

`@navbarHeight`	40 képpont
`@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`

Legördülő menük

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

Hős egység

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

A mixinekről

Alapvető keverékek

Az alap mixin lényegében a CSS egy részletének belefoglalása vagy részleges része. Úgy vannak megírva, mint egy CSS-osztály, és bárhonnan meghívhatók.

. elem {
  . clearfix ();
}

Paraméteres keverések

A parametrikus mixin olyan, mint egy alap mixin, de paramétereket (innen a név) is elfogad opcionális alapértelmezett értékekkel.

. elem {
  . határ - sugár ( 4 képpont );
}

Könnyen hozzáadhatja a sajátját

A Bootstrap szinte minden mixinje a mixins.lessben van tárolva, egy csodálatos .less fájlban, amely lehetővé teszi, hogy mixint használjon az eszközkészletben található .less fájlokban.

Tehát folytassa és használja a meglévőket, vagy szükség szerint adja hozzá a sajátját.

Tartalmazott mixinek

segédprogramok

Mixin	Paraméterek	Használat
`.clearfix()`	egyik sem	Adja hozzá bármelyik szülőhöz, hogy megtisztítsa a lebegéseket
`.tab-focus()`	egyik sem	Alkalmazza a Webkit fókuszstílust és kerekítse a Firefox körvonalát
`.center-block()`	egyik sem	Egy blokkszintű elem automatikus központosítása a használatával`margin: auto`
`.ie7-inline-block()`	egyik sem	Használja a szokásos mellett `display: inline-block`az IE7 támogatásához
`.size()`	`@height @width`	Gyorsan állítsa be a magasságot és a szélességet egy sorban
`.square()`	`@size`	Arra épít, `.size()`hogy a szélességet és a magasságot azonos értékként állítsa be
`.opacity()`	`@opacity`	Állítsa be egész számokkal az átlátszóság százalékát (pl. "50" vagy "75")

Űrlapok

Mixin	Paraméterek	Használat
`.placeholder()`	`@color: @placeholderText`	Állítsa be a `placeholder`szöveg színét a bemenetekhez

Tipográfia

Mixin	Paraméterek	Használat
`#font > #family > .serif()`	egyik sem	Szerif betűkészletet használjon egy elemhez
`#font > #family > .sans-serif()`	egyik sem	Egy elem használata sans-serif font veremben
`#font > #family > .monospace()`	egyik sem	Egy elemhez monospace betűkészletet használjon
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Könnyen beállíthatja a betűméretet, a súlyt és a kezdősort
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Állítsa be a betűcsaládot serif értékre, és szabályozza a méretet, a súlyt és a kezdőpontot
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Állítsa be a betűtípuscsaládot sans-serif-re, és szabályozza a méretet, a súlyt és a kezdőpontot
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Állítsa be a betűcsaládot monospace-re, és szabályozza a méretet, a súlyt és a kezdőpontot

Rács rendszer

Mixin	Paraméterek	Használat
`.container-fixed()`	egyik sem	Hozzon létre egy vízszintesen középre helyezett tárolót a tartalom tárolására
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Képpont rácsrendszer létrehozása (tároló, sor és oszlopok) n oszloppal és x pixel széles ereszcsatornával
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Hozzon létre egy precent rácsrendszert n oszloppal és x % széles ereszcsatornával
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Létrehozza a pixelrács rendszert az `input`elemekhez, figyelembe véve a kitöltést és a szegélyeket
`.makeColumn`	`@columns: 1, @offset: 0`	Bármelyiket `div`alakítson rácsoszloppá az `.span*`osztályok nélkül

CSS3 tulajdonságok

Mixin	Paraméterek	Használat
`.border-radius()`	`@radius`	Lekerekítik egy elem sarkait. Lehet egyetlen érték vagy négy szóközzel elválasztott érték
`.box-shadow()`	`@shadow`	Adjon hozzá egy vetett árnyékot egy elemhez
`.transition()`	`@transition`	CSS3 átmeneti effektus hozzáadása (pl. `all .2s linear`)
`.rotate()`	`@degrees`	Egy elem elforgatása n fokkal
`.scale()`	`@ratio`	Egy elem méretezése eredeti méretének n -szeresére
`.translate()`	`@x, @y`	Mozgasson egy elemet az x és y síkon
`.background-clip()`	`@clip`	Egy elem hátterének levágása (hasznos a következőhöz `border-radius`)
`.background-size()`	`@size`	A háttérképek méretének szabályozása a CSS3-on keresztül
`.box-sizing()`	`@boxmodel`	Módosítsa egy elem dobozmodelljét (pl. `border-box`teljes szélességű esetén `input`)
`.user-select()`	`@select`	Szabályozza a kurzorral az oldalon lévő szöveg kiválasztását
`.backface-visibility()`	`@visibility: visible`	A tartalom villogásának megakadályozása CSS 3D átalakítások használatakor
`.resizable()`	`@direction: both`	Bármely elemet átméretezhetővé tegye a jobb és az alsó oldalon
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Bármely elem tartalma CSS3 oszlopokat használjon

Hátterek és színátmenetek

Mixin	Paraméterek	Használat
`#translucent > .background()`	`@color: @white, @alpha: 1`	Adjon áttetsző háttérszínt egy elemnek
`#translucent > .border()`	`@color: @white, @alpha: 1`	Adjon áttetsző szegélyszínt egy elemnek
`#gradient > .vertical()`	`@startColor, @endColor`	Böngészőkön átívelő függőleges háttérszínátmenet létrehozása
`#gradient > .horizontal()`	`@startColor, @endColor`	Hozzon létre egy böngészők közötti vízszintes háttérszínátmenetet
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Hozzon létre egy böngészők közötti irányú háttérszínátmenetet
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Hozzon létre egy böngészőközi háromszínű háttérátmenetet
`#gradient > .radial()`	`@innerColor, @outerColor`	Hozzon létre egy böngészők közötti radiális háttér gradienst
`#gradient > .striped()`	`@color, @angle`	Hozzon létre egy böngészők közötti csíkos háttér színátmenetet
`#gradientBar()`	`@primaryColor, @secondaryColor`	A gombokhoz használható színátmenet és kissé sötétebb szegély hozzárendelésére

Megjegyzés: Ha lekérési kérelmet küld a GitHubnak módosított CSS-sel, újra kell fordítania a CSS-t ezen módszerek bármelyikével.

Eszközök az összeállításhoz

Csomópont makefile-val

Telepítse a LESS parancssori fordítót és az uglify-js-t globálisan az npm segítségével a következő parancs futtatásával:

$ npm install -g less uglify-js

A telepítés után futtassa makea rendszerindító könyvtár gyökeréből, és már kész is.

Ezenkívül, ha telepítve van a watchr , akkor futhat make watch, hogy a bootstrap automatikusan újraépüljön minden alkalommal, amikor egy fájlt szerkeszt a bootstrap libben (ez nem kötelező, csak kényelmi módszer).

Parancs sor

Telepítse a LESS parancssori eszközt a Node-on keresztül, és futtassa a következő parancsot:

$ lessc ./less/bootstrap.less > bootstrap.css

--compressHa néhány bájtot szeretne menteni, feltétlenül adja meg ezt a parancsot!

Javascript

Töltse le a legújabb Less.js fájlt , és adja meg az elérési utat (és a Bootstrap-et) a <head>.

<link rel = "stylesheet/less" href = "/útvonal/bootstrap.less" > <script src = " /elérési út/a/kevésbé.js-hez" ></script>

A .less fájlok újrafordításához csak mentse el őket, és töltse be újra az oldalt. A Less.js lefordítja és a helyi tárhelyen tárolja.

Nem hivatalos Mac alkalmazás

A nem hivatalos Mac-alkalmazás figyeli a .less fájlok könyvtárait, és a megtekintett .less fájl minden mentése után lefordítja a kódot helyi fájlokra.

Ha szeretné, az alkalmazásban beállíthatja az automatikus kicsinyítés beállításait, és azt, hogy a lefordított fájlok melyik könyvtárba kerülnek.

LESS-ből épült

Miért KEVESEBB?

Mit tartalmaz?

Tudj meg többet

Változók

Mixins

Tevékenységek

Bootstrap változók KEVESEBB változók, értékeik és használati útmutatók

Állványok és linkek

Rács rendszer

Tipográfia

Táblázatok

Szürkeárnyalatos színek

Kiemelt színek

Alkatrészek

Gombok

Űrlapok

Űrlapállapotok és figyelmeztetések

Navbar

Legördülő menük

Hős egység

Bootstrap mixins

A mixinekről

Alapvető keverékek

Paraméteres keverések

Könnyen hozzáadhatja a sajátját

Tartalmazott mixinek

segédprogramok

Űrlapok

Tipográfia

Rács rendszer

CSS3 tulajdonságok

Hátterek és színátmenetek

Bootstrap fordítása a LESS segítségével

Eszközök az összeállításhoz

Csomópont makefile-val

Parancs sor

Javascript

Nem hivatalos Mac alkalmazás

További Mac alkalmazások

Ropogtat

CodeKit

Egyszerű