Verwenden von LESS mit Bootstrap

Passen Sie Bootstrap mit LESS , einem CSS-Präprozessor, an und erweitern Sie es, um die Vorteile der Variablen, Mixins und mehr zu nutzen, die zum Erstellen des CSS von Bootstrap verwendet werden.

Warum WENIGER?

Bootstrap basiert im Kern auf LESS, einer dynamischen Stylesheet-Sprache, die von unserem guten Freund Alexis Sellier entwickelt wurde . Es macht die Entwicklung von systembasiertem CSS schneller, einfacher und macht mehr Spaß.

Was ist inbegriffen?

Als Erweiterung von CSS enthält LESS Variablen, Mixins für wiederverwendbare Codeschnipsel, Operationen für einfache Mathematik, Verschachtelungen und sogar Farbfunktionen.

Mehr erfahren

Besuchen Sie die offizielle Website unter http://lesscss.org/ , um mehr zu erfahren.

Variablen

Das Verwalten von Farben und Pixelwerten in CSS kann ein bisschen mühsam sein, normalerweise voller Kopieren und Einfügen. Nicht jedoch mit LESS – weisen Sie Farben oder Pixelwerte als Variablen zu und ändern Sie sie einmal.

Mixins

Diese drei Grenzradius-Deklarationen, die Sie im normalen alten CSS machen müssen? Jetzt sind sie mit Hilfe von Mixins, Codeschnipseln, die Sie überall wiederverwenden können, auf eine Zeile reduziert.

Operationen

Machen Sie Ihr Raster führend und superflexibel, indem Sie die Berechnungen im Handumdrehen mit Operationen durchführen. Multiplizieren, dividieren, addieren und subtrahieren Sie Ihren Weg zur CSS-Vernunft.

Gerüste und Verbindungen

`@bodyBackground`	`@white`	Hintergrundfarbe der Seite
`@textColor`	`@grayDark`	Standardtextfarbe für den gesamten Text, Überschriften und mehr
`@linkColor`	`#08c`	Standardfarbe für Linktext
`@linkColorHover`	`darken(@linkColor, 15%)`	Standardfarbe für den Hover-Linktext

Grid-System

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Typografie

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, serifenlos
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", Monospace
`@baseFontSize`	13px	Muss Pixel sein
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Muss Pixel sein
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tische

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

Graustufenfarben

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#F f f

Akzentfarben

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Komponenten

Tasten

`@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`

Formen

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

Formularzustände und Warnungen

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

Navigationsleiste

`@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`

Heldeneinheit

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Über Mixins

Grundlegende Mixins

Ein einfaches Mixin ist im Wesentlichen ein Include oder Partial für ein CSS-Snippet. Sie sind wie eine CSS-Klasse geschrieben und können überall aufgerufen werden.

. Element {
  . Klarfix ();
}

Parametrische Mixins

Ein parametrisches Mixin ist genau wie ein einfaches Mixin, akzeptiert aber auch Parameter (daher der Name) mit optionalen Standardwerten.

. Element {
  . Grenze - Radius ( 4px );
}

Fügen Sie einfach Ihre eigenen hinzu

Fast alle Mixins von Bootstrap sind in mixins.less gespeichert, einer wunderbaren .less-Dienstprogrammdatei, mit der Sie ein Mixin in jeder der .less-Dateien im Toolkit verwenden können.

Verwenden Sie also die vorhandenen oder fügen Sie bei Bedarf Ihre eigenen hinzu.

Enthaltene Mixins

Dienstprogramme

Mischen	Parameter	Verwendungszweck
`.clearfix()`	keiner	Fügen Sie zu einem übergeordneten Element hinzu, um Floats darin zu löschen
`.tab-focus()`	keiner	Wenden Sie den Webkit-Fokusstil und die runde Firefox-Kontur an
`.center-block()`	keiner	Ein Element auf Blockebene automatisch zentrieren mit`margin: auto`
`.ie7-inline-block()`	keiner	Verwenden Sie zusätzlich zur regulären `display: inline-block`Version, um IE7-Unterstützung zu erhalten
`.size()`	`@height @width`	Stellen Sie schnell die Höhe und Breite auf einer Zeile ein
`.square()`	`@size`	Baut darauf auf `.size()`, Breite und Höhe auf denselben Wert festzulegen
`.opacity()`	`@opacity`	Legen Sie den Deckkraftprozentsatz in ganzen Zahlen fest (z. B. "50" oder "75")

Formen

Mischen	Parameter	Verwendungszweck
`.placeholder()`	`@color: @placeholderText`	Legen Sie die `placeholder`Textfarbe für Eingaben fest

Typografie

Mischen	Parameter	Verwendungszweck
`#font > #family > .serif()`	keiner	Lassen Sie ein Element einen Serifenschriftstapel verwenden
`#font > #family > .sans-serif()`	keiner	Lassen Sie ein Element einen Sans-Serif-Font-Stack verwenden
`#font > #family > .monospace()`	keiner	Lassen Sie ein Element einen Monospace-Schriftstapel verwenden
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Einfaches Festlegen von Schriftgröße, Gewicht und Zeilenabstand
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stellen Sie die Schriftfamilie auf Serif ein und steuern Sie Größe, Gewicht und Zeilenabstand
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stellen Sie die Schriftfamilie auf Sans-Serif ein und steuern Sie Größe, Gewicht und Zeilenabstand
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Stellen Sie die Schriftfamilie auf Monospace ein und steuern Sie Größe, Gewicht und Zeilenabstand

Grid-System

Mischen	Parameter	Verwendungszweck
`.container-fixed()`	keiner	Erstellen Sie einen horizontal zentrierten Behälter für Ihre Inhalte
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generieren Sie ein Pixelrastersystem (Container, Zeilen und Spalten) mit n Spalten und einem x Pixel breiten Steg
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Erzeuge ein Prozentrastersystem mit n Spalten und x % breitem Bund
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generieren Sie das Pixelrastersystem für `input`Elemente unter Berücksichtigung von Polsterung und Rändern
`.makeColumn`	`@columns: 1, @offset: 0`	Verwandeln Sie any `div`in eine Rasterspalte ohne die `.span*`Klassen

CSS3-Eigenschaften

Mischen	Parameter	Verwendungszweck
`.border-radius()`	`@radius`	Runden Sie die Ecken eines Elements ab. Kann ein einzelner Wert oder vier durch Leerzeichen getrennte Werte sein
`.box-shadow()`	`@shadow`	Fügen Sie einem Element einen Schlagschatten hinzu
`.transition()`	`@transition`	CSS3-Übergangseffekt hinzufügen (z. B. `all .2s linear`)
`.rotate()`	`@degrees`	Dreht ein Element um n Grad
`.scale()`	`@ratio`	Skalieren Sie ein Element auf das n - fache seiner ursprünglichen Größe
`.translate()`	`@x, @y`	Verschieben Sie ein Element auf der x- und y-Ebene
`.background-clip()`	`@clip`	Den Hintergrund eines Elements zuschneiden (nützlich für `border-radius`)
`.background-size()`	`@size`	Steuern Sie die Größe von Hintergrundbildern über CSS3
`.box-sizing()`	`@boxmodel`	Ändern Sie das Box-Modell für ein Element (z. B. `border-box`für eine volle Breite `input`)
`.user-select()`	`@select`	Steuern Sie die Cursorauswahl von Text auf einer Seite
`.backface-visibility()`	`@visibility: visible`	Verhindern Sie das Flackern von Inhalten bei der Verwendung von CSS-3D-Transformationen
`.resizable()`	`@direction: both`	Machen Sie jedes Element rechts und unten in der Größe veränderbar
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Lassen Sie den Inhalt eines beliebigen Elements CSS3-Spalten verwenden

Hintergründe und Farbverläufe

Mischen	Parameter	Verwendungszweck
`#translucent > .background()`	`@color: @white, @alpha: 1`	Geben Sie einem Element eine durchscheinende Hintergrundfarbe
`#translucent > .border()`	`@color: @white, @alpha: 1`	Geben Sie einem Element eine durchscheinende Rahmenfarbe
`#gradient > .vertical()`	`@startColor, @endColor`	Erstellen Sie einen browserübergreifenden vertikalen Hintergrundverlauf
`#gradient > .horizontal()`	`@startColor, @endColor`	Erstellen Sie einen browserübergreifenden horizontalen Hintergrundverlauf
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Erstellen Sie einen browserübergreifenden gerichteten Hintergrundverlauf
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Erstellen Sie einen browserübergreifenden dreifarbigen Hintergrundverlauf
`#gradient > .radial()`	`@innerColor, @outerColor`	Erstellen Sie einen browserübergreifenden radialen Hintergrundverlauf
`#gradient > .striped()`	`@color, @angle`	Erstellen Sie einen browserübergreifenden gestreiften Hintergrundverlauf
`#gradientBar()`	`@primaryColor, @secondaryColor`	Wird für Schaltflächen verwendet, um einen Farbverlauf und einen etwas dunkleren Rand zuzuweisen

Hinweis: Wenn Sie eine Pull-Anforderung mit geändertem CSS an GitHub senden, müssen Sie das CSS mit einer dieser Methoden neu kompilieren.

Werkzeuge zum Kompilieren

Knoten mit Makefile

Installieren Sie den LESS-Befehlszeilencompiler und uglify-js global mit npm, indem Sie den folgenden Befehl ausführen:

$ npm install -g less uglify-js

Nach der Installation führen Sie es einfach makevom Stammverzeichnis Ihres Bootstrap-Verzeichnisses aus und schon sind Sie fertig.

Wenn Sie watchr installiert haben, können Sie außerdem ausführen make watch, dass Bootstrap jedes Mal automatisch neu erstellt wird, wenn Sie eine Datei in der Bootstrap-Bibliothek bearbeiten (dies ist nicht erforderlich, nur eine bequeme Methode).

Befehlszeile

Installieren Sie das LESS-Befehlszeilentool über Node und führen Sie den folgenden Befehl aus:

$ lessc ./less/bootstrap.less > bootstrap.css

Fügen --compressSie diesen Befehl unbedingt hinzu, wenn Sie versuchen, einige Bytes zu sparen!

Javascript

Laden Sie die neueste Less.js herunter und fügen Sie den Pfad dazu (und Bootstrap) in die <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Um die .less-Dateien neu zu kompilieren, speichern Sie sie einfach und laden Sie Ihre Seite neu. Less.js kompiliert sie und speichert sie im lokalen Speicher.

Inoffizielle Mac-App

Die inoffizielle Mac-App überwacht Verzeichnisse mit .less-Dateien und kompiliert den Code nach jedem Speichern einer überwachten .less-Datei in lokale Dateien.

Wenn Sie möchten, können Sie in der App die Einstellungen für das automatische Minifizieren und das Verzeichnis, in dem die kompilierten Dateien landen, umschalten.

Gebaut mit WENIGER

Warum WENIGER?

Was ist inbegriffen?

Mehr erfahren

Variablen

Mixins

Operationen

Bootstrap-Variablen LESS-Variablen, ihre Werte und Verwendungsrichtlinien

Gerüste und Verbindungen

Grid-System

Typografie

Tische

Graustufenfarben

Akzentfarben

Komponenten

Tasten

Formen

Formularzustände und Warnungen

Navigationsleiste

Dropdowns

Heldeneinheit

Bootstrap-Mixins

Über Mixins

Grundlegende Mixins

Parametrische Mixins

Fügen Sie einfach Ihre eigenen hinzu

Enthaltene Mixins

Dienstprogramme

Formen

Typografie

Grid-System

CSS3-Eigenschaften

Hintergründe und Farbverläufe

Bootstrap mit LESS kompilieren

Werkzeuge zum Kompilieren

Knoten mit Makefile

Befehlszeile

Javascript

Inoffizielle Mac-App

Weitere Mac-Apps

Knirschen

CodeKit

Einfach