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

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ù.

. élément {
  . clearfix ();
}

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.

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

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 de`margin: auto`
`.ie7-inline-block()`	rien	Utilisez-le en plus du support régulier `display: inline-block`pour 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 `placeholder`couleur 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 `div`en 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-box`pour 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.

Construit avec MOINS

Pourquoi MOINS ?

Ce qui est inclu?

Apprendre encore plus

variables

Mélanges

Opérations

Variables d'amorçage Variables MOINS, leurs valeurs et directives d'utilisation

Échafaudages et liens

Système de grille

Typographie

les tables

Couleurs en niveaux de gris

Couleurs d'accent

Composants

Boutons

Formes

États de formulaire et alertes

Barre de navigation

Listes déroulantes

Unité de héros

Mixins bootstrap

À propos des mixins

Mixins de base

Mixins paramétriques

Ajoutez facilement le vôtre

Mixins inclus

Utilitaires

Formes

Typographie

Système de grille

Propriétés CSS3

Arrière-plans et dégradés

Compiler Bootstrap avec LESS

Outils pour compiler

Nœud avec makefile

Ligne de commande

Javascript

Application Mac non officielle

Plus d'applications Mac

Croquer

Code Kit

Simplicité