Ngagunakeun LESS kalawan Bootstrap
Sesuaikeun sareng manjangkeun Bootstrap sareng LESS , preprocessor CSS, pikeun ngamangpaatkeun variabel, campuran, sareng seueur deui anu dianggo pikeun ngawangun CSS Bootstrap.
Diwangun ku KURANG
Naha KURANG?
Bootstrap dijieun kalawan KURANG dina inti na, basa stylesheet dinamis dijieun ku sobat alus urang, Alexis Sellier . Éta ngajantenkeun ngembangkeun CSS dumasar sistem langkung gancang, langkung gampang, sareng langkung pikaresepeun.
Naon kaasup?
Salaku penyuluhan CSS, KURANG ngawengku variabel, mixins pikeun snippét reusable kode, operasi pikeun matematik basajan, nyarang, komo fungsi warna.
Variabel
Ngatur warna sareng nilai piksel dina CSS tiasa rada nyeri, biasana pinuh ku salinan sareng témpél. Henteu sareng KURANG sanaos-tugaskeun warna atanapi nilai piksel salaku variabel sareng robih sakali.
Campuran
Éta tilu deklarasi wates-radius anu anjeun kedah lakukeun dina CSS biasa? Ayeuna aranjeunna nuju ka hiji garis kalayan bantosan mixins, snippét kode anu anjeun tiasa dianggo deui dimana waé.
Operasi
Jieun grid anjeun, ngarah, sarta leuwih super fléksibel ku ngalakonan math on laleur jeung operasi. Kalikeun, bagikeun, tambahkeun, sareng ngirangan jalan anjeun kana sanity CSS.
Variabel Bootstrap Variabel KURANG, nilaina, sareng pedoman pamakean
Hyperlinks
@linkColor |
#08c | Warna téks link standar | |
@linkColorHover |
darken(@linkColor, 15%) |
Warna hover téks link standar |
Sistim grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tipografi
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Warna grayscale
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeee | |
@white |
#fff |
Warna aksen
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponén
Kancing
@primaryButtonBackground |
@linkColor |
Bentuk
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Bentuk kaayaan sareng panggeuing
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Campuran Bootstrap
Ngeunaan mixins
Campuran dasar
A mixin dasar dasarna mangrupa kaasup atawa parsial pikeun snippet of CSS. Éta ditulis sapertos kelas CSS sareng tiasa disebat dimana waé.
- . unsur {
- . clearfix ();
- }
Campuran paramétrik
Campuran paramétrik sapertos mixin dasar, tapi ogé nampi parameter (ku kituna nami) kalayan nilai standar opsional.
- . unsur {
- . wates - radius ( 4px );
- }
Gampang nambahkeun sorangan
Ampir kabéh mixin Bootstrap disimpen dina mixins.less, file .less utiliti anu saé anu ngamungkinkeun anjeun ngagunakeun mixin dina salah sahiji file .less dina toolkit.
Janten, teraskeun sareng paké anu tos aya atanapi ngarasa Luncat pikeun nambihan anjeun nyalira sakumaha anu anjeun peryogikeun.
Kaasup mixins
Utiliti
| Mixin | Parameter | Pamakéan |
|---|---|---|
.clearfix() |
euweuh | Tambahkeun ka kolot wae pikeun mupus floats dina |
.tab-focus() |
euweuh | Larapkeun gaya fokus Webkit sareng bunderan Firefox outline |
.center-block() |
euweuh | Otomatis puseur unsur block-tingkat ngagunakeunmargin: auto |
.ie7-inline-block() |
euweuh | Anggo salian biasa display: inline-blockpikeun kéngingkeun dukungan IE7 |
.size() |
@height: 5px, @width: 5px |
Gancang nyetel jangkungna sarta rubak dina hiji garis |
.square() |
@size: 5px |
Diwangun .size()pikeun nyetél lebar sareng jangkungna salaku nilai anu sami |
.opacity() |
@opacity: 100 |
Setel, dina jumlah gembleng, persentase opacity (contona, "50" atanapi "75") |
Bentuk
| Mixin | Parameter | Pamakéan |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Setel placeholderwarna téks pikeun input |
Tipografi
| Mixin | Parameter | Pamakéan |
|---|---|---|
#font > #family > .serif() |
euweuh | Jieun unsur ngagunakeun tumpukan font serif |
#font > #family > .sans-serif() |
euweuh | Jieun unsur ngagunakeun tumpukan font sans-serif |
#font > #family > .monospace() |
euweuh | Jieun unsur ngagunakeun tumpukan font monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Gampang nyetél ukuran font, beurat, sareng ngarah |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Setel kulawarga font ka serif, sarta ukuran kontrol, beurat, sarta ngarah |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Setel kulawarga font ka sans-serif, sarta ukuran kontrol, beurat, sarta ngarah |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Setel kulawarga font kana monospace, jeung kontrol ukuran, beurat, jeung ngarah |
Sistim grid
| Mixin | Parameter | Pamakéan |
|---|---|---|
.container-fixed() |
euweuh | Nyadiakeun hiji tetep-lebar (set kalawan @siteWidth) wadahna pikeun nahan eusi Anjeun |
.columns() |
@columns: 1 |
Ngawangun kolom grid nu ngawengku sajumlah kolom (standar pikeun 1 kolom) |
.offset() |
@columns: 1 |
Offset kolom grid kalawan margin kénca nu ngawengku sajumlah kolom |
.gridColumn() |
euweuh | Jieun hiji unsur ngambang kawas kolom grid |
sipat CSS3
| Mixin | Parameter | Pamakéan |
|---|---|---|
.border-radius() |
@radius: 5px |
Babak juru hiji unsur. Bisa jadi hiji nilai tunggal atawa opat spasi-dipisahkeun nilai |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Tambahkeun bayangan serelek ka unsur |
.transition() |
@transition |
Tambahkeun pangaruh transisi CSS3 (misalna, all .2s linear) |
.rotate() |
@degrees |
Muterkeun unsur n derajat |
.scale() |
@ratio |
Skala unsur ka n kali ukuran aslina |
.translate() |
@x: 0, @y: 0 |
Pindahkeun hiji unsur dina pesawat x jeung y |
.background-clip() |
@clip |
Potong latar hiji unsur (mangpaat pikeun border-radius) |
.background-size() |
@size |
Kontrol ukuran gambar latar ngaliwatan CSS3 |
.box-sizing() |
@boxmodel |
Robah modél kotak pikeun unsur (contona, border-boxpikeun lebar pinuh input) |
.user-select() |
@select |
Kontrol pilihan kursor téks dina kaca |
.resizable() |
@direction: both |
Jieun elemen naon resizable on katuhu jeung handap |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Jieun eusi sagala unsur ngagunakeun kolom CSS3 |
Latar jeung gradién
| Mixin | Parameter | Pamakéan |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Masihan hiji unsur warna latar tembus |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Masihan hiji unsur warna wates tembus |
.#gradient > .vertical() |
@startColor, @endColor |
Jieun gradién tukang nangtung cross-browser |
.#gradient > .horizontal() |
@startColor, @endColor |
Jieun gradién latar horisontal cross-browser |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Jieun gradién tukang arah cross-browser |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Jieun gradién latar tilu warna cross-browser |
.#gradient > .radial() |
@innerColor, @outerColor |
Jieun gradién latar tukang radial cross-browser |
.#gradient > .striped() |
@color, @angle |
Jieun gradién latar belang cross-browser |
.#gradientBar() |
@primaryColor, @secondaryColor |
Dipaké pikeun tombol napelkeun gradién jeung wates rada darker |
Nyusun Bootstrap sareng KURANG
Parabot pikeun nyusun
Node sareng makefile
Pasang kompiler garis paréntah LESS sacara global sareng npm ku ngajalankeun paréntah di handap ieu:
$ npm install -g kirang
Sakali dipasang ngan ngajalankeun maketina akar diréktori bootstrap anjeun sarta anjeun geus siap.
Salaku tambahan, upami anjeun parantos dipasang watchr , anjeun tiasa ngajalankeun make watchbootstrap otomatis diwangun deui unggal waktos anjeun ngédit file dina lib bootstrap (ieu henteu diperyogikeun, ngan ukur cara anu gampang).
Garis paréntah
Pasang alat garis paréntah LESS via Node sareng jalankeun paréntah di handap ieu:
$ lessc ./lib/bootstrap.less > bootstrap.css
Pastikeun kalebet --compresskana paréntah éta upami anjeun nyobian ngahémat sababaraha bait!
JavaScript
Unduh Less.js panganyarna sareng kalebet jalur ka dinya (sareng Bootstrap) dina file <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Pikeun recompile file .less, ngan simpen aranjeunna sarta muatkeun deui kaca anjeun. Less.js compiles aranjeunna sarta nyimpen aranjeunna dina gudang lokal.
Aplikasi Mac teu resmi
Aplikasi Mac teu resmi ningali diréktori file .less sareng nyusun kode kana file lokal saatos unggal nyimpen file .less anu diawaskeun.
Upami anjeun resep, anjeun tiasa ngagentos préferénsi dina aplikasi pikeun ngaminimalkeun otomatis sareng diréktori mana file anu disusun.
Aplikasi Mac langkung seueur
Krérét
Crunch mangrupikeun redaktur KURANG anu saé sareng kompiler anu diwangun dina Adobe Air.
CodeKit
Dijieun ku lalaki anu sami sareng aplikasi Mac anu teu resmi, CodeKit mangrupikeun aplikasi Mac anu nyusun LESS, SASS, Stylus, sareng CoffeeScript.
Basajan
Mac, Linux, sareng aplikasi PC pikeun nyered sareng ngaleupas kompilasi file KURANG. Tambih Deui, kodeu sumber aya dina GitHub .