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

WENIGER CSS

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

  1. . Element {
  2. . Klarfix ();
  3. }

Parametrische Mixins

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

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

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 mitmargin: auto
.ie7-inline-block() keiner Verwenden Sie zusätzlich zur regulären display: inline-blockVersion, 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 placeholderTextfarbe 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 Steg
#grid > .input() @gridColumnWidth, @gridGutterWidth Generieren Sie das Pixelrastersystem für inputElemente unter Berücksichtigung von Polsterung und Rändern
.makeColumn @columns: 1, @offset: 0 Verwandeln Sie any divin 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-boxfü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
.hyphens() @mode: auto CSS3-Silbentrennung, wenn Sie es wünschen (einschließlich word-wrap: break-word)

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, JSHint, Recess und uglify-js global mit npm, indem Sie den folgenden Befehl ausführen:

$ npm install -g less jshint Recess 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.

Weitere Mac-Apps

Knirschen

Crunch ist ein großartig aussehender LESS-Editor und -Compiler, der auf Adobe Air basiert.

CodeKit

CodeKit wurde von demselben Typ wie die inoffizielle Mac-App entwickelt und ist eine Mac-App, die LESS, SASS, Stylus und CoffeeScript kompiliert.

Einfach

Mac-, Linux- und PC-App zum Drag-and-Drop-Kompilieren von LESS-Dateien. Außerdem befindet sich der Quellcode auf GitHub .