Variable bootstrap remplaçant avec LESS

J’ai étudié pendant toute la journée car je pensais que cela valait la peine de passer du temps à apprendre les meilleures pratiques pour personnaliser Bootstrap .

Je peux voir qu’il existe une page conviviale pour personnaliser les éléments de manière sélective à partir de http://twitter.github.io/bootstrap/customize.html, mais je souhaite avoir plus de contrôle sans toucher aux fichiers source bootstrap originaux.

Pour commencer, je voulais essentiellement tester la modification de la grid de 12 à 16 colonnes et pour ce faire, j’ai créé ma propre variable moins de fichier et ajouté @gridColumns: 16; seulement à ce fichier et importé cette coutume moins à l’intérieur de bootstrap.less comme suit.

// Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; **@import "../custom-variables.less"; //Override variables** 

Puis, en utilisant WinLess, j’ai compilé le fichier bootstrap.less pour obtenir un nouvel appel bootstrap.css avec une variable imscope et lié le css au fichier HTML, mais la grid ne passera pas à 16 colonnes.

Quelqu’un peut-il s’il vous plaît indiquer ce que je fais mal?

Je travaille sur un projet similaire où nous avons du bootstrap dans un emplacement «tiers», puis nous ne mixins.less que mixins.less et variables.less . Le modèle que nous utilisons pour cela ajoute trois fichiers et ne touche pas du tout le bootstrap (ce qui vous permet de supprimer facilement les remplacements):

 /style |- bootstrap-master/ | |- less/ | |- js/ | ... |- shared/ |- shared.less |- variables.less |- mixins.less 

le fichier mixins

 /* * /style/shared/mixins.less */ @import "../bootstrap-master/less/mixins.less"; // override any mixins (or add any of your third party mixins here) 

le fichier de variables, qui remplace les grids

 /* * /style/shared/variables.less */ @import "../bootstrap-master/less/variables.less"; @gridColumns: 16; // let's pretend this is your site-specific override 

Le fichier qui est réellement importé (ou transmis à un compilateur inférieur):

 /* * /style/shared/shared.less */ @import "variables.less"; @import "mixins.less"; @import "../bootstrap-master/less/grid.less"; //and any other bootstrap less files we need here 

Dans ma configuration, si je le fais, je reçois un fichier CSS contenant des valeurs .span15 étranges (puisque je n’ai pas mis à jour @gridColumnWidth ou @gridGutterWidth mais que les valeurs du fluide .row fonctionnent exactement comme prévu) à, car ils sont calculés par simple division).

J’aime cette configuration parce que je peux cd en bootstrap-master et git pull et aller chercher de nouvelles mises à jour sans avoir à fusionner mes kludges spécifiques (cela me donne aussi une bonne idée de ce que j’ai réellement écrasé)

L’autre chose est qu’il est très clair que shared.less n’utilise que grid.less (plutôt que tout le bootstrap). Ceci est intentionnel car dans la plupart des cas, vous n’avez pas besoin de tous les bootstrap, juste quelques parties pour y aller. La plupart des fichiers bootstrap moins sont au moins agréables car leurs seules dépendances shared.less sont shared.less et mixins.less

si cela ne fonctionne toujours pas, alors peut-être que WinLess devient confus

Remplacement des variables après l’ importation du bootstrap.less original fonctionne parfaitement pour moi:

 @import "less/bootstrap.less"; @body-bg: red; @text-color: green; @link-color: blue; 

Comstackr les sorties source LESS ci-dessus correctement personnalisé code CSS Bootstrap.

Informations pertinentes: http://lesscss.org/features/#variables-feature-lazy-loading

Un autre exemple qui peut aider quelqu’un:

 @import 'bootstrap/bootstrap/variables'; // Prgress bar @progress-bar-bg: #f5f5f5; @progress-bar-default-color: @gray-base; @import 'bootstrap/bootstrap'; 

Un moyen simple consiste simplement à remplacer les styles de votre doc de style, en utilisant le même nom et en le marquant comme important!