Χρήση LESS με το Bootstrap

Προσαρμόστε και επεκτείνετε το Bootstrap με το LESS , έναν προεπεξεργαστή CSS, για να επωφεληθείτε από τις μεταβλητές, τα mixins και άλλα που χρησιμοποιούνται για τη δημιουργία του CSS του Bootstrap.

Γιατί ΛΙΓΟΤΕΡΟ;

Το Bootstrap είναι κατασκευασμένο με LESS στον πυρήνα του, μια δυναμική γλώσσα φύλλου στυλ που δημιουργήθηκε από τον καλό μας φίλο, Alexis Sellier . Κάνει την ανάπτυξη CSS που βασίζεται σε συστήματα ταχύτερη, ευκολότερη και πιο διασκεδαστική.

Τι περιλαμβάνεται;

Ως επέκταση του CSS, το LESS περιλαμβάνει μεταβλητές, mixins για επαναχρησιμοποιήσιμα αποσπάσματα κώδικα, λειτουργίες για απλά μαθηματικά, ένθεση, ακόμη και συναρτήσεις χρώματος.

Μάθε περισσότερα

ΛΙΓΟΤΕΡΟ CSS

Επισκεφτείτε τον επίσημο ιστότοπο στη διεύθυνση http://lesscss.org/ για να μάθετε περισσότερα.

Μεταβλητές

Η διαχείριση των χρωμάτων και των τιμών των pixel στο CSS μπορεί να είναι λίγο επίπονη, συνήθως γεμάτη αντιγραφή και επικόλληση. Όχι όμως με LESS—αντιστοιχίστε χρώματα ή τιμές pixel ως μεταβλητές και αλλάξτε τα μία φορά.

Μίξεις

Αυτές οι τρεις δηλώσεις ακτίνας συνόρων πρέπει να κάνετε στο κανονικό CSS; Τώρα έχουν φτάσει σε μία γραμμή με τη βοήθεια mixins, αποσπάσματα κώδικα που μπορείτε να χρησιμοποιήσετε ξανά οπουδήποτε.

Λειτουργίες

Κάντε το πλέγμα σας, κορυφαίο και πιο σούπερ ευέλικτο κάνοντας τα μαθηματικά εν κινήσει με τις πράξεις. Πολλαπλασιάστε, διαιρέστε, προσθέστε και αφαιρέστε το δρόμο σας προς τη λογική CSS.

Σκαλωσιές και σύνδεσμοι

@bodyBackground @white Χρώμα φόντου σελίδας
@textColor @grayDark Προεπιλεγμένο χρώμα κειμένου για ολόκληρο το σώμα, επικεφαλίδες και άλλα
@linkColor #08c Προεπιλεγμένο χρώμα κειμένου συνδέσμου
@linkColorHover darken(@linkColor, 15%) Χρώμα αιώρησης προεπιλεγμένου κειμένου συνδέσμου

Σύστημα πλέγματος

@gridColumns 12
@gridColumnWidth 60 εικονοστοιχεία
@gridGutterWidth 20 εικονοστοιχεία
@fluidGridColumnWidth 6,382978723%
@fluidGridGutterWidth 2,127659574%

Τυπογραφία

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13 εικονοστοιχεία Πρέπει να είναι pixel
@baseFontFamily @sansFontFamily
@baseLineHeight 18 εικονοστοιχεία Πρέπει να είναι pixel
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Πίνακες

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

Χρώματα σε κλίμακα του γκρι

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

Χρώματα έμφασης

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

Συστατικά

Κουμπιά

@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

Έντυπα

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

Σχηματίστε καταστάσεις και ειδοποιήσεις

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

Navbar

@navbarHeight 40 εικονοστοιχεία
@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

Αναπτυσσόμενα

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

Μονάδα ηρώων

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Σχετικά με τα mixins

Βασικά μείγματα

Ένα βασικό mixin είναι ουσιαστικά ένα περιλαμβάνει ή ένα μερικό για ένα απόσπασμα του CSS. Είναι γραμμένα ακριβώς όπως μια τάξη CSS και μπορούν να καλούνται οπουδήποτε.

  1. . στοιχείο {
  2. . clearfix ();
  3. }

Παραμετρικές μίξεις

Μια παραμετρική μίξη είναι ακριβώς όπως μια βασική μίξη, αλλά δέχεται επίσης παραμέτρους (εξ ου και το όνομα) με προαιρετικές προεπιλεγμένες τιμές.

  1. . στοιχείο {
  2. . περίγραμμα - ακτίνα ( 4px );
  3. }

Προσθέστε εύκολα το δικό σας

Σχεδόν όλα τα mixin του Bootstrap αποθηκεύονται στο mixins.less, ένα υπέροχο αρχείο .less βοηθητικού προγράμματος που σας δίνει τη δυνατότητα να χρησιμοποιήσετε ένα mixin σε οποιοδήποτε από τα αρχεία .less της εργαλειοθήκης.

Επομένως, προχωρήστε και χρησιμοποιήστε τα υπάρχοντα ή μη διστάσετε να προσθέσετε τα δικά σας όπως χρειάζεστε.

Περιλαμβάνονται μείγματα

Βοηθητικά προγράμματα

Mixin Παράμετροι Χρήση
.clearfix() κανένας Προσθέστε σε οποιονδήποτε γονέα για να διαγράψετε τις πλωτήρες εντός
.tab-focus() κανένας Εφαρμόστε το στυλ εστίασης του Webkit και στρογγυλέψτε το περίγραμμα του Firefox
.center-block() κανένας Αυτόματο κεντράρισμα ενός στοιχείου σε επίπεδο μπλοκ χρησιμοποιώνταςmargin: auto
.ie7-inline-block() κανένας Χρησιμοποιήστε το εκτός από το κανονικό display: inline-blockγια να λάβετε υποστήριξη IE7
.size() @height @width Ρυθμίστε γρήγορα το ύψος και το πλάτος σε μία γραμμή
.square() @size Βασίζεται για .size()να ορίσει το πλάτος και το ύψος ως την ίδια τιμή
.opacity() @opacity Ορίστε, σε ακέραιους αριθμούς, το ποσοστό αδιαφάνειας (π.χ. "50" ή "75")

Έντυπα

Mixin Παράμετροι Χρήση
.placeholder() @color: @placeholderText Ορίστε το placeholderχρώμα του κειμένου για εισόδους

Τυπογραφία

Mixin Παράμετροι Χρήση
#font > #family > .serif() κανένας Κάντε ένα στοιχείο να χρησιμοποιεί μια στοίβα γραμματοσειρών serif
#font > #family > .sans-serif() κανένας Κάντε ένα στοιχείο να χρησιμοποιεί μια στοίβα γραμματοσειρών sans-serif
#font > #family > .monospace() κανένας Κάντε ένα στοιχείο να χρησιμοποιεί μια στοίβα γραμματοσειρών monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ρυθμίστε εύκολα το μέγεθος, το βάρος και την κύρια γραμματοσειρά
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ρυθμίστε την οικογένεια γραμματοσειρών σε serif και ελέγξτε το μέγεθος, το βάρος και το βασικό
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ρυθμίστε την οικογένεια γραμματοσειρών σε sans-serif και ελέγξτε το μέγεθος, το βάρος και το βασικό
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ρυθμίστε την οικογένεια γραμματοσειρών σε μονοδιάστημα και ελέγξτε το μέγεθος, το βάρος και το βασικό

Σύστημα πλέγματος

Mixin Παράμετροι Χρήση
.container-fixed() κανένας Δημιουργήστε ένα οριζόντια κεντραρισμένο κοντέινερ για τη διατήρηση του περιεχομένου σας
#grid > .core() @gridColumnWidth, @gridGutterWidth Δημιουργήστε ένα σύστημα πλέγματος εικονοστοιχείων (κοντέινερ, σειρά και στήλες) με n στήλες και x ευρεία υδρορροή pixel
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Δημιουργήστε ένα ποσοστό συστήματος πλέγματος με n στήλες και x % πλάτος υδρορροή
#grid > .input() @gridColumnWidth, @gridGutterWidth Δημιουργήστε το σύστημα πλέγματος εικονοστοιχείων για inputστοιχεία, λαμβάνοντας υπόψη τις επενδύσεις και τα περιγράμματα
.makeColumn @columns: 1, @offset: 0 Μετατρέψτε οποιαδήποτε divσε στήλη πλέγματος χωρίς τις .span*κλάσεις

Ιδιότητες CSS3

Mixin Παράμετροι Χρήση
.border-radius() @radius Στρογγυλοποιήστε τις γωνίες ενός στοιχείου. Μπορεί να είναι μια μεμονωμένη τιμή ή τέσσερις τιμές διαχωρισμένες σε διάστημα
.box-shadow() @shadow Προσθέστε μια σκιά σε ένα στοιχείο
.transition() @transition Προσθήκη εφέ μετάβασης CSS3 (π.χ., all .2s linear)
.rotate() @degrees Περιστρέψτε ένα στοιχείο n μοίρες
.scale() @ratio Κλιμακώστε ένα στοιχείο σε n επί του αρχικού του μεγέθους
.translate() @x, @y Μετακινήστε ένα στοιχείο στα επίπεδα x και y
.background-clip() @clip Περικοπή του φόντου ενός στοιχείου (χρήσιμο για border-radius)
.background-size() @size Ελέγξτε το μέγεθος των εικόνων φόντου μέσω CSS3
.box-sizing() @boxmodel Αλλάξτε το μοντέλο πλαισίου για ένα στοιχείο (π.χ. border-boxγια ένα πλήρες πλάτος input)
.user-select() @select Έλεγχος επιλογής κειμένου με δρομέα σε μια σελίδα
.backface-visibility() @visibility: visible Αποτρέψτε το τρεμόπαιγμα του περιεχομένου όταν χρησιμοποιείτε μετασχηματισμούς CSS 3D
.resizable() @direction: both Κάντε οποιοδήποτε στοιχείο με δυνατότητα αλλαγής μεγέθους δεξιά και κάτω
.content-columns() @columnCount, @columnGap: @gridGutterWidth Κάντε το περιεχόμενο οποιουδήποτε στοιχείου να χρησιμοποιεί στήλες CSS3
.hyphens() @mode: auto Συλλαβισμός CSS3 όταν το θέλετε (περιλαμβάνει word-wrap: break-word)

Φόντα και κλίσεις

Mixin Παράμετροι Χρήση
#translucent > .background() @color: @white, @alpha: 1 Δώστε σε ένα στοιχείο ένα ημιδιαφανές χρώμα φόντου
#translucent > .border() @color: @white, @alpha: 1 Δώστε σε ένα στοιχείο ένα ημιδιαφανές χρώμα περιγράμματος
#gradient > .vertical() @startColor, @endColor Δημιουργήστε μια κατακόρυφη κλίση φόντου μεταξύ προγραμμάτων περιήγησης
#gradient > .horizontal() @startColor, @endColor Δημιουργήστε μια οριζόντια κλίση φόντου μεταξύ προγραμμάτων περιήγησης
#gradient > .directional() @startColor, @endColor, @deg Δημιουργήστε μια κλίση φόντου κατεύθυνσης μεταξύ του προγράμματος περιήγησης
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Δημιουργήστε μια κλίση φόντου τριών χρωμάτων μεταξύ προγραμμάτων περιήγησης
#gradient > .radial() @innerColor, @outerColor Δημιουργήστε μια ακτινωτή κλίση φόντου μεταξύ προγραμμάτων περιήγησης
#gradient > .striped() @color, @angle Δημιουργήστε μια κλίση φόντου με ρίγες μεταξύ του προγράμματος περιήγησης
#gradientBar() @primaryColor, @secondaryColor Χρησιμοποιείται για κουμπιά για την εκχώρηση ντεγκραντέ και ελαφρώς πιο σκούρου περιγράμματος
Σημείωση: Εάν υποβάλλετε αίτημα έλξης στο GitHub με τροποποιημένο CSS, πρέπει να μεταγλωττίσετε ξανά το CSS μέσω οποιασδήποτε από αυτές τις μεθόδους.

Εργαλεία για τη μεταγλώττιση

Κόμβος με makefile

Εγκαταστήστε τον μεταγλωττιστή της γραμμής εντολών LESS, το JSHint, το Recess και το uglify-js καθολικά με npm εκτελώντας την ακόλουθη εντολή:

$ npm εγκατάσταση -g λιγότερο jshint recess uglify-js

Μόλις εγκατασταθεί, εκτελέστε απλώς makeαπό τη ρίζα του καταλόγου εκκίνησης και είστε έτοιμοι.

Επιπλέον, εάν έχετε εγκαταστήσει το watchr , μπορείτε να εκτελέσετε make watchτην αυτόματη ανακατασκευή του bootstrap κάθε φορά που επεξεργάζεστε ένα αρχείο στο bootstrap lib (αυτό δεν απαιτείται, απλώς μια βολική μέθοδος).

Γραμμή εντολών

Εγκαταστήστε το εργαλείο γραμμής εντολών LESS μέσω του Node και εκτελέστε την ακόλουθη εντολή:

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

Φροντίστε να συμπεριλάβετε --compressσε αυτήν την εντολή εάν προσπαθείτε να αποθηκεύσετε μερικά byte!

Javascript

Κατεβάστε το πιο πρόσφατο Less.js και συμπεριλάβετε τη διαδρομή προς αυτό (και το Bootstrap) στο <head>.

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

Για να μεταγλωττίσετε ξανά τα αρχεία .less, απλώς αποθηκεύστε τα και φορτώστε ξανά τη σελίδα σας. Το Less.js τα μεταγλωττίζει και τα αποθηκεύει σε τοπικό χώρο αποθήκευσης.

Ανεπίσημη εφαρμογή Mac

Η ανεπίσημη εφαρμογή Mac παρακολουθεί καταλόγους αρχείων .less και μεταγλωττίζει τον κώδικα σε τοπικά αρχεία μετά από κάθε αποθήκευση ενός αρχείου .less που παρακολουθείτε.

Εάν θέλετε, μπορείτε να αλλάξετε τις προτιμήσεις στην εφαρμογή για αυτόματη ελαχιστοποίηση και σε ποιον κατάλογο καταλήγουν τα μεταγλωττισμένα αρχεία.

Περισσότερες εφαρμογές Mac

Τραγάνισμα

Το Crunch είναι ένα υπέροχο πρόγραμμα επεξεργασίας και μεταγλωττιστής LESS που έχει δημιουργηθεί στο Adobe Air.

CodeKit

Δημιουργήθηκε από τον ίδιο τύπο με την ανεπίσημη εφαρμογή Mac, το CodeKit είναι μια εφαρμογή Mac που μεταγλωττίζει LESS, SASS, Stylus και CoffeeScript.

Απλή

Εφαρμογή Mac, Linux και PC για μεταφορά και απόθεση μεταγλώττισης ΛΙΓΟΤΕΡΩΝ αρχείων. Επιπλέον, ο πηγαίος κώδικας βρίσκεται στο GitHub .