Utiliser LESS avec Bootstrap

Personnalisez et étendez Bootstrap avec LESS , un préprocesseur CSS, pour tirer parti des variables, mixins et autres utilisés pour créer le CSS de Bootstrap.

Pourquoi MOINS ?

Bootstrap est fait avec LESS en son cœur, un langage de feuille de style dynamique créé par notre bon ami, Alexis Sellier . Il rend le développement de CSS basé sur les systèmes plus rapide, plus facile et plus amusant.

Ce qui est inclu?

En tant qu'extension de CSS, LESS inclut des variables, des mixins pour des extraits de code réutilisables, des opérations pour des fonctions mathématiques simples, d'imbrication et même de couleur.

Apprendre encore plus

MOINS DE CSS

Visitez le site Web officiel à http://lesscss.org/ pour en savoir plus.

variables

La gestion des couleurs et des valeurs de pixel dans CSS peut être un peu pénible, généralement pleine de copier-coller. Pas avec LESS cependant - affectez des couleurs ou des valeurs de pixel en tant que variables et modifiez-les une fois.

Mélanges

Ces trois déclarations de rayon de bordure que vous devez faire dans le CSS classique ? Maintenant, ils sont réduits à une seule ligne à l'aide de mixins, des extraits de code que vous pouvez réutiliser n'importe où.

Opérations

Rendez votre grille, leader et plus flexible en faisant le calcul à la volée avec des opérations. Multipliez, divisez, ajoutez et soustrayez votre chemin vers la santé mentale CSS.

Échafaudages et liens

@bodyBackground @white Couleur de fond de page
@textColor @grayDark Couleur de texte par défaut pour tout le corps, les en-têtes, etc.
@linkColor #08c Couleur du texte du lien par défaut
@linkColorHover darken(@linkColor, 15%) Couleur de survol du texte du lien par défaut

Système de grille

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2,127659574 %

Typographie

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans empattement
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courrier New", monospace
@baseFontSize 13px Doit être en pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Doit être en pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

les tables

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

Couleurs en niveaux de gris

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

Couleurs d'accent

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

Composants

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

Formes

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

États de formulaire et alertes

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

Barre de navigation

@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

Listes déroulantes

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

Unité de héros

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

À propos des mixins

Mixins de base

Un mixin de base est essentiellement une inclusion ou un partiel pour un extrait de CSS. Ils sont écrits comme une classe CSS et peuvent être appelés n'importe où.

  1. . élément {
  2. . clearfix ();
  3. }

Mixins paramétriques

Un mixin paramétrique est comme un mixin de base, mais il accepte également des paramètres (d'où le nom) avec des valeurs par défaut facultatives.

  1. . élément {
  2. . bordure - rayon ( 4px );
  3. }

Ajoutez facilement le vôtre

Presque tous les mixins de Bootstrap sont stockés dans mixins.less, un merveilleux fichier utilitaire .less qui vous permet d'utiliser un mixin dans n'importe lequel des fichiers .less de la boîte à outils.

Alors, allez-y et utilisez ceux qui existent déjà ou n'hésitez pas à ajouter les vôtres selon vos besoins.

Mixins inclus

Utilitaires

Mélanger Paramètres Usage
.clearfix() rien Ajouter à n'importe quel parent pour effacer les flottants à l'intérieur
.tab-focus() rien Appliquer le style de focus Webkit et le contour rond de Firefox
.center-block() rien Centrer automatiquement un élément de niveau bloc à l'aide demargin: auto
.ie7-inline-block() rien Utilisez-le en plus du support régulier display: inline-blockpour obtenir le support IE7
.size() @height @width Réglez rapidement la hauteur et la largeur sur une seule ligne
.square() @size S'appuie sur .size()pour définir la largeur et la hauteur sur la même valeur
.opacity() @opacity Définissez, en nombres entiers, le pourcentage d'opacité (par exemple, "50" ou "75")

Formes

Mélanger Paramètres Usage
.placeholder() @color: @placeholderText Définir la placeholdercouleur du texte pour les entrées

Typographie

Mélanger Paramètres Usage
#font > #family > .serif() rien Faire en sorte qu'un élément utilise une pile de polices serif
#font > #family > .sans-serif() rien Faire en sorte qu'un élément utilise une pile de polices sans empattement
#font > #family > .monospace() rien Faire en sorte qu'un élément utilise une pile de polices à espacement fixe
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Définissez facilement la taille, le poids et l'interlignage de la police
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Définissez la famille de polices sur serif et contrôlez la taille, l'épaisseur et l'interlignage
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Définissez la famille de polices sur sans empattement et contrôlez la taille, l'épaisseur et l'interlignage
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Définissez la famille de polices sur espacement fixe et contrôlez la taille, l'épaisseur et l'interlignage

Système de grille

Mélanger Paramètres Usage
.container-fixed() rien Créez un conteneur centré horizontalement pour contenir votre contenu
#grid > .core() @gridColumnWidth, @gridGutterWidth Générer un système de grille de pixels (conteneur, ligne et colonnes) avec n colonnes et une gouttière de x pixels de large
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Générer un système de grille de pourcentage avec n colonnes et x % de largeur de gouttière
#grid > .input() @gridColumnWidth, @gridGutterWidth Générer le système de grille de pixels pour les inputéléments, en tenant compte du remplissage et des bordures
.makeColumn @columns: 1, @offset: 0 Transformez n'importe lequel diven une colonne de grille sans les .span*classes

Propriétés CSS3

Mélanger Paramètres Usage
.border-radius() @radius Arrondir les coins d'un élément. Peut être une valeur unique ou quatre valeurs séparées par des espaces
.box-shadow() @shadow Ajouter une ombre portée à un élément
.transition() @transition Ajouter un effet de transition CSS3 (par exemple, all .2s linear)
.rotate() @degrees Faire pivoter un élément de n degrés
.scale() @ratio Mettre à l'échelle un élément à n fois sa taille d'origine
.translate() @x, @y Déplacer un élément sur les plans x et y
.background-clip() @clip Recadrer l'arrière-plan d'un élément (utile pour border-radius)
.background-size() @size Contrôlez la taille des images d'arrière-plan via CSS3
.box-sizing() @boxmodel Changer le modèle de boîte pour un élément (par exemple, border-boxpour une pleine largeur input)
.user-select() @select Contrôler la sélection du curseur de texte sur une page
.backface-visibility() @visibility: visible Empêcher le scintillement du contenu lors de l'utilisation de transformations CSS 3D
.resizable() @direction: both Rendre n'importe quel élément redimensionnable à droite et en bas
.content-columns() @columnCount, @columnGap: @gridGutterWidth Faire en sorte que le contenu de n'importe quel élément utilise des colonnes CSS3
.hyphens() @mode: auto Césure CSS3 quand vous le souhaitez (inclut word-wrap: break-word)

Arrière-plans et dégradés

Mélanger Paramètres Usage
#translucent > .background() @color: @white, @alpha: 1 Donner à un élément une couleur de fond translucide
#translucent > .border() @color: @white, @alpha: 1 Donner à un élément une couleur de bordure translucide
#gradient > .vertical() @startColor, @endColor Créer un dégradé d'arrière-plan vertical multi-navigateur
#gradient > .horizontal() @startColor, @endColor Créer un dégradé d'arrière-plan horizontal multi-navigateur
#gradient > .directional() @startColor, @endColor, @deg Créer un dégradé d'arrière-plan directionnel multi-navigateur
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Créer un dégradé d'arrière-plan tricolore multi-navigateur
#gradient > .radial() @innerColor, @outerColor Créer un dégradé d'arrière-plan radial multi-navigateur
#gradient > .striped() @color, @angle Créer un dégradé d'arrière-plan rayé multi-navigateur
#gradientBar() @primaryColor, @secondaryColor Utilisé pour les boutons pour attribuer un dégradé et une bordure légèrement plus foncée
Remarque : Si vous soumettez une demande d'extraction à GitHub avec un CSS modifié, vous devez recompiler le CSS via l'une de ces méthodes.

Outils pour compiler

Nœud avec makefile

Installez le compilateur de ligne de commande LESS, JSHint, Recess et uglify-js globalement avec npm en exécutant la commande suivante :

$ npm install -g less jshint évidement uglify-js

Une fois installé, exécutez- le à makepartir de la racine de votre répertoire d'amorçage et vous êtes prêt.

De plus, si vous avez installé watchr , vous pouvez exécuter make watchpour que bootstrap soit automatiquement reconstruit chaque fois que vous modifiez un fichier dans la bibliothèque bootstrap (ce n'est pas obligatoire, juste une méthode pratique).

Ligne de commande

Installez l'outil de ligne de commande LESS via Node et exécutez la commande suivante :

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

Assurez-vous d'inclure --compressdans cette commande si vous essayez d'économiser des octets !

Javascript

Téléchargez le dernier Less.js et incluez son chemin (et Bootstrap) dans le fichier <head>.

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

Pour recompiler les fichiers .less, il suffit de les enregistrer et de recharger votre page. Less.js les compile et les stocke dans le stockage local.

Application Mac non officielle

L'application Mac non officielle surveille les répertoires de fichiers .less et compile le code dans des fichiers locaux après chaque sauvegarde d'un fichier .less surveillé.

Si vous le souhaitez, vous pouvez basculer les préférences dans l'application pour la minification automatique et le répertoire dans lequel les fichiers compilés se retrouvent.

Plus d'applications Mac

Croquer

Crunch est un superbe éditeur et compilateur LESS construit sur Adobe Air.

Code Kit

Créé par le même gars que l'application Mac non officielle, CodeKit est une application Mac qui compile LESS, SASS, Stylus et CoffeeScript.

Simplicité

Application Mac, Linux et PC pour la compilation par glisser-déposer de fichiers LESS. De plus, le code source est sur GitHub .