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

KEVESEBB CSS

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

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.

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

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.

  1. . elem {
  2. . határ - sugár ( 4px );
  3. }

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ávalmargin: auto
.ie7-inline-block() egyik sem Használja a szokásos mellett display: inline-blockaz 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 placeholderszö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 Készítsen százalékos rácsrendszert n oszloppal és x % széles ereszcsatornával
#grid > .input() @gridColumnWidth, @gridGutterWidth Létrehozza a pixelrács rendszert az inputelemekhez, figyelembe véve a kitöltést és a szegélyeket
.makeColumn @columns: 1, @offset: 0 Bármelyiket divalakí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-boxteljes 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
.hyphens() @mode: auto CSS3 elválasztás, amikor akarja (tartalmazza a word-wrap: break-word)

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, a JSHint, a Recess és az uglify-js-t globálisan az npm segítségével a következő parancs futtatásával:

$ npm install -g less jshint recess 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.

További Mac alkalmazások

Ropogtat

A Crunch egy nagyszerű megjelenésű LESS szerkesztő és fordító, amely Adobe Airre épül.

CodeKit

Ugyanaz a srác hozta létre, mint a nem hivatalos Mac-alkalmazás, a CodeKit egy olyan Mac-alkalmazás, amely LESS, SASS, Stylus és CoffeeScript fordításokat végez.

Egyszerű

Mac-, Linux- és PC-alkalmazás KEVESEBB fájlok drag and drop fordításához. Ráadásul a forráskód a GitHubon található .