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.
LESS-ből épült
Miért KEVESEBB?
A Bootstrap lényegében a LESS-ből készült, 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.
Bootstrap változók KEVESEBB változók, értékeik és használati útmutatók
Hiperhivatkozások
@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
@baseFontSize |
13 képpont | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18 képpont |
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
@primaryButtonBackground |
@linkColor |
Űrlapok
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40 képpont | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Űrlapállapotok és figyelmeztetések
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
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 ( 4px );
- }
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: 5px, @width: 5px |
Gyorsan állítsa be a magasságot és a szélességet egy sorban |
.square() |
@size: 5px |
Arra épít, .size()hogy a szélességet és a magasságot azonos értékként állítsa be |
.opacity() |
@opacity: 100 |
Á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 | Biztosítson egy rögzített szélességű @siteWidthtárolót a tartalom tárolására |
.columns() |
@columns: 1 |
Hozzon létre egy rácsoszlopot, amely tetszőleges számú oszlopot ölel fel (alapértelmezés szerint 1 oszlop) |
.offset() |
@columns: 1 |
Eltolás egy rácsoszlopot bal margóval, amely tetszőleges számú oszlopot átível |
.gridColumn() |
egyik sem | Lebegtessen egy elemet, mint egy rácsoszlopot |
CSS3 tulajdonságok
| Mixin | Paraméterek | Használat |
|---|---|---|
.border-radius() |
@radius: 5px |
Lekerekítik egy elem sarkait. Lehet egyetlen érték vagy négy szóközzel elválasztott érték |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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 az eredeti méret n -szeresére |
.translate() |
@x: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Bármely elemet átméretezhetővé tegye a jobb és az alsó oldalon |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
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 |
Bootstrap fordítása a LESS segítségével
Eszközök az összeállításhoz
Csomópont makefile-val
Telepítse a LESS parancssori fordítót az npm-mel a következő parancs futtatásával:
$ npm kevesebb telepítés
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 ./lib/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ó .