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.

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, LESS ngawengku variabel, mixins pikeun snippét kode reusable, operasi pikeun matematik basajan, nyarang, komo fungsi warna.

Diajar deui

KURANG CSS

Nganjang ka ramatloka resmi di http://lesscss.org/ pikeun neuleuman leuwih.

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.

Parancah jeung Tumbu

@bodyBackground @white Warna latar halaman
@textColor @grayDark Warna téks standar pikeun sakabéh awak, judul, sareng seueur deui
@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

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Kurir Anyar", monospace
@baseFontSize 13px Kudu piksel
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Kudu piksel
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

tabél

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

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

@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

Bentuk

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

Bentuk kaayaan sareng panggeuing

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

Navbar

@navbarHeight 40px
@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

Dropdowns

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Unit pahlawan

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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é.

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

Campuran paramétrik

Campuran paramétrik sapertos mixin dasar, tapi ogé nampi parameter (ku kituna nami) kalayan nilai standar opsional.

  1. . unsur {
  2. . wates - radius ( 4px );
  3. }

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 indungna mana 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 @width Setel jangkungna sareng lebar gancang dina hiji garis
.square() @size Diwangun .size()pikeun nyetél lebar sareng jangkungna salaku nilai anu sami
.opacity() @opacity 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 Jieun wadahna horizontal dipuseurkeun pikeun nahan eusi Anjeun
#grid > .core() @gridColumnWidth, @gridGutterWidth Ngahasilkeun sistem grid piksel (wadah, baris, sareng kolom) kalayan n kolom sareng x talang lebar piksel
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Ngahasilkeun sistem grid persén kalawan n kolom jeung x % talang lega
#grid > .input() @gridColumnWidth, @gridGutterWidth Ngahasilkeun sistem grid piksel pikeun inputelemen, akuntansi pikeun padding jeung wates
.makeColumn @columns: 1, @offset: 0 Hurungkeun naon waé divkana kolom grid tanpa .span*kelas

sipat CSS3

Mixin Parameter Pamakéan
.border-radius() @radius Babak juru hiji unsur. Bisa jadi hiji nilai tunggal atawa opat spasi-dipisahkeun nilai
.box-shadow() @shadow 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, @y 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
.backface-visibility() @visibility: visible Nyegah kedip-kedip eusi nalika nganggo CSS 3D transforms
.resizable() @direction: both Jieun elemen naon resizable on katuhu jeung handap
.content-columns() @columnCount, @columnGap: @gridGutterWidth Jieun eusi sagala unsur ngagunakeun kolom CSS3
.hyphens() @mode: auto CSS3 hyphenation sawaktos Anjeun hoyong eta (kaasup word-wrap: break-word)

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
Catetan: Upami anjeun ngirimkeun pamundut tarik ka GitHub nganggo CSS anu dirobih, anjeun kedah nyusun ulang CSS nganggo salah sahiji metodeu ieu.

Parabot pikeun nyusun

Node sareng makefile

Pasang kompiler garis paréntah LESS, JSHint, Recess, sareng uglify-js sacara global sareng npm ku ngajalankeun paréntah di handap ieu:

$ npm install -g kirang jshint recess uglify-js

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 ./less/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 henteu 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 .