Kosalela LESS na Bootstrap

Personnaliser mpe ko extend Bootstrap na LESS , préprocesseur ya CSS, mpo na ko profiter na ba variables, mixins, mpe mingi oyo esalelamaka mpo na kotonga CSS ya Bootstrap.

Mpo na nini LESS?

Bootstrap esalemi na LESS na moboko na yango, monoko ya stylesheet dynamique oyo esalemi na moninga na biso ya malamu, Alexis Sellier . Ezali kosala ete kosala CSS oyo esalemi na ba systèmes ezala mbangu, pete, mpe esengo.

Nini ezali na kati?

Lokola bobakisi ya CSS, LESS ezali na ba variables, ba mixins mpo na ba fragments ya code oyo ekoki kosalelama lisusu, ba opérations mpo na matematiki ya pete, nesting, mpe ata ba fonctions ya couleur.

Yekola makambo mosusu

MOKE YA CSS

Kota na site internet ya officiel na http://lesscss.org/ mpo na koyeba makambo mingi.

Ba variables oyo ezali

Kokamba balangi mpe motuya ya pixel na CSS ekoki kozala mwa mpasi, mbala mingi etondi na kopi mpe kokɔtisa. Na LESS te atako bongo —pesa balangi to motuya ya pixel lokola ba variables mpe bongola yango mbala moko.

Ba mixins

Ba déclarations misato wana ya frontière-radius esengeli osala na ol' CSS ya ordinaire? Sikoyo bakiti na ligne moko na aide ya ba mixins, ba fragments ya code oyo okoki ko réutiliser partout.

Misala ya kosala

Sala grille na yo, kokamba, mpe mingi super flexible na kosalaka mathématiques na vol na ba opérations. Multiplier, kabola, bakisa, mpe longola nzela na yo na CSS sanity.

Échafaudage na ba liens

@bodyBackground @white Color ya fond ya lokasa
@textColor @grayDark Langi ya makomi ya liboso mpo na nzoto mobimba, mitó ya makambo, mpe makambo mosusu
@linkColor #08c Color ya texte ya lien par défaut
@linkColorHover darken(@linkColor, 15%) Color ya hover texte ya lien par défaut

Système ya grille

@gridColumns 12
@gridColumnWidth 60px ezali
@gridGutterWidth 20px ezali
@fluidGridColumnWidth 6,382978723% Ezali ndenge nini?
@fluidGridGutterWidth 2,127659574% Ezali ndenge nini?

Typographie

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier Nouveau", monoespace
@baseFontSize 13px ezali Esengeli kozala ba pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ezali Esengeli kozala ba pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Bamesa

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

Ba couleurs ya gris

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

Ba couleurs ya accent

@blue #049cdb ezali
@green #46a546 oyo ezali
@red #9d261d
@yellow #ffc40d
@orange #f89406 na kombo ya
@pink #c3325f ezali bongo
@purple #7a43b6

Ba composants

Ba boutons

@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

Baformilɛrɛ

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

Formulaire ba états na ba alertes

@warningText #c09853 na kombo ya
@warningBackground #f3edd2
@errorText #b94a48 na kombo ya
@errorBackground #f2dede
@successText #468847 na likambo yango
@successBackground #dff0d8 oyo ezali
@infoText #3a87mobateli ya bato
@infoBackground #d9edf7

Navbar

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

Ba dropdowns ya kokita

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

Unité ya elombe

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Na ntina na ba mixins

Ba mixins ya base

Mixin ya base ezali essentiellement inclure to partiel pona fragment ya CSS. Bakomami kaka lokola kelasi ya CSS mpe bakoki kobenga yango bisika nyonso.

  1. . eleman { .
  2. . bobongisi ya polele ();
  3. } .

Ba mixins paramétriques

Mixin paramétrique ezali kaka lokola mixin ya base, kasi endimaka pe ba paramètres (yango wana kombo) na ba valeurs par défaut optionnelle.

  1. . eleman { .
  2. . ndelo - rayon ( 4px );
  3. } .

Bakisa oyo ya yo na pete

Pene na ba mixins nionso ya Bootstrap ebombami na mixins.less, fichier .less ya utilitaire ya kokamwa oyo epesaka yo makoki ya kosalela mixin na moko ya ba fichiers .less oyo ezali na kati ya trousse ya bisaleli.

Na yango, kende liboso mpe salelá oyo ezali to yoká nsɔni te kobakisa oyo ya yo ndenge ozali na yango mposa.

Ezali na ba mixins

Ba utilités

Mixin oyo azali Ba paramètres Kosalela yango
.clearfix() moko te Bakisa na moboti nyonso mpo na kosilisa ba flotteurs na kati
.tab-focus() moko te Salelá lolenge ya kotya likebi ya Webkit mpe plan ya Firefox ya rond
.center-block() moko te Auto centre un élément ya niveau ya bloc kosalelamargin: auto
.ie7-inline-block() moko te Salelá en plus ya régulier display: inline-blockmpo na kozwa lisungi ya IE7
.size() @height @width Tyá nokinoki bosanda mpe bonene na molɔngɔ moko
.square() @size Etongaka likolo .size()mpo na kotiya bonene mpe bosanda lokola motuya moko
.opacity() @opacity Botia, na mituya mobimba, pourcentage ya opacité (ndakisa, "50" to "75") .

Baformilɛrɛ

Mixin oyo azali Ba paramètres Kosalela yango
.placeholder() @color: @placeholderText Bobongisa placeholderlangi ya makomi mpo na makambo oyo bakokɔtisa

Typographie

Mixin oyo azali Ba paramètres Kosalela yango
#font > #family > .serif() moko te Sala élément moko esalela stack ya fonte serif
#font > #family > .sans-serif() moko te Sala élément moko esalela stack ya fonte sans-serif
#font > #family > .monospace() moko te Sala élément esalela stack ya fonte monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Set facilement taille ya fonte, kilo, mpe liboso
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Botia libota ya makomi na serif, mpe botambwisa bonene, kilo, mpe liboso
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Botia libota ya makomi na sans-serif, mpe botambwisa bonene, kilo, mpe liboso
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Botia libota ya makomi na monospace, mpe botambwisa bonene, kilo, mpe bokambi

Système ya grille

Mixin oyo azali Ba paramètres Kosalela yango
.container-fixed() moko te Salá eloko oyo ezali na katikati ya horizontal mpo na kokanga makambo na yo
#grid > .core() @gridColumnWidth, @gridGutterWidth Bosala système ya grille ya ba pixel (conteneur, molongo, na ba colonnes) na n colonne na gouttière ya largeur ya x pixel
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Bosala système ya grille ya pourcentage na n colonne na x % gouttière ya largeur
#grid > .input() @gridColumnWidth, @gridGutterWidth Generer système ya grille ya pixel pona inputba éléments, comptabilité ya remplissage na ba frontières
.makeColumn @columns: 1, @offset: 0 Bobongola nionso divna colonne ya grille sans ba .span*classes

Ba propriétés ya CSS3

Mixin oyo azali Ba paramètres Kosalela yango
.border-radius() @radius Bosala rond na ba coins ya élément moko. Ekoki kozala motuya moko to motuya minei oyo ekabwani na esika
.box-shadow() @shadow Bakisa elili ya kokita na élément moko
.transition() @transition Bakisa effet ya transition ya CSS3 (ndakisa, all .2s linear) .
.rotate() @degrees Bobalusa eleman moko na degrés n
.scale() @ratio Bosala échelle ya élément moko na n mbala ya taille na yango ya ebandeli
.translate() @x, @y Bokende na élément moko na ba plans x na y
.background-clip() @clip Bokata fond ya élément moko (ezali na tina pona border-radius) .
.background-size() @size Bokamba bonene ya bilili ya nsima na nzela ya CSS3
.box-sizing() @boxmodel Bobongola modèle ya boîte mpo na élément moko (ndakisa, border-boxmpo na bonene mobimba input) .
.user-select() @select Contrôler pona curseur ya texte na page moko
.backface-visibility() @visibility: visible Kopekisa ko flickering ya contenus tango ozali kosalela ba transformations CSS 3D
.resizable() @direction: both Sala que élément nionso ekoki ko changer bonene na droite pe na se
.content-columns() @columnCount, @columnGap: @gridGutterWidth Sala que contenus ya élément nionso esalela ba colonnes CSS3
.hyphens() @mode: auto CSS3 hyphenation tango olingi yango (ezali na word-wrap: break-word) .

Ba fond mpe ba gradients

Mixin oyo azali Ba paramètres Kosalela yango
#translucent > .background() @color: @white, @alpha: 1 Pesa élément moko couleur ya fond translucide
#translucent > .border() @color: @white, @alpha: 1 Pesa élément moko couleur ya frontière translucide
#gradient > .vertical() @startColor, @endColor Bosala gradient ya fond vertical ya navigateur croisé
#gradient > .horizontal() @startColor, @endColor Bosala gradient ya fond horizontal ya navigateur croisé
#gradient > .directional() @startColor, @endColor, @deg Bosala gradient ya fond directionnel ya navigateur croisé
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Bosala gradient ya fond ya couleur misato ya croix-navigateur
#gradient > .radial() @innerColor, @outerColor Bosala gradient ya fond radial ya navigateur croisé
#gradient > .striped() @color, @angle Bosala gradient ya fond oyo ezali na ba rayures ya croix-navigateur
#gradientBar() @primaryColor, @secondaryColor Esalemi mpo na ba boutons mpo na kopesa gradient mpe ndelo ya mwa molili
Liyebisi: Soki ozali kotinda bosengi ya kobenda na GitHub na CSS oyo ebongisami, osengeli kozongisa CSS na nzela ya moko ya mayele oyo.

Bisaleli mpo na kosangisa biloko

Node na makefile

Botia compilateur ya ligne ya commande LESS, JSHint, Recess, na uglify-js na mokili mobimba na npm na kosala commande oyo elandi:

$ npm installer -g moke jshint esika ya kofanda uglify-js

Une fois installé kaka tambola makedepuis root ya répertoire bootstrap na yo pe oza nionso set.

En plus, soki oza na watchr installé, okoki ko kima make watchpo bootstrap etongama lisusu automatiquement chaque fois o éditer fichier na bootstrap lib (oyo esengeli te, kaka méthode ya convenance).

Molongo ya komande

Botia esaleli ya ligne ya commande LESS na nzela ya Node mpe bosala commande oyo elandi:

$ lessc ./moke/bobebisi.moke > bobandi.css

Sala makasi otia --compressna commande wana soki ozali koluka kobomba mua ba octets!

Javascript ezali

Télécharger Less.js ya sika mpe kotia nzela ya kokende na yango (mpe Bootstrap) na <head>.

<link rel = "lokasa ya lolenge/moke" href = "/nzela/na/bootstrap.moke" > <script src = "/nzela/na/moke.js" ></script>  
 

Pona ko recompiler ba fichiers .less, bomba kaka yango pe recharger page na yo. Less.js e compiler yango mpe ebombaka yango na stockage local.

Application Mac oyo ezali officiel te

Application Mac oyo ezali officielle te etalaka ba répertoires ya ba fichiers .less mpe e compiler code na ba fichiers locales après chaque sauvegarde ya fichier .less oyo etali.

Soki olingi, okoki kobongola makambo oyo olingaka na programɛ yango mpo na kosala minifying automatique mpe répertoire nini ba fichiers compilés esukaka na yango.

Ba apps ya Mac mingi

Crunch ya kosala

Crunch ezali éditeur mpe compilateur ya LESS oyo ezali komonana malamu oyo etongami na Adobe Air.

CodeKit ya mibeko

Esalemi na mobali moko na appli Mac oyo ezali officielle te, CodeKit ezali appli Mac oyo esangisi LESS, SASS, Stylus, mpe CoffeeScript.

Ezali pɛtɛɛ te

Mac, Linux, mpe PC app mpo na kobenda mpe kobwaka compilation ya ba fichiers LESS. Plus, code source ezali na GitHub .