How to compile Bootstrap LESS (a bunch of LESS files) 

Joined:
02/21/2009
Posts:
172

October 16, 2013 09:14:24    Last update: October 16, 2013 09:14:24
The initial attempt was to compile the bunch of LESS files with:
lessc less/*

But then I got errors like:
NameError: variable @line-height-computed is undefined in accordion.less on line 8, column 18:
7 .accordion {
8   margin-bottom: @line-height-computed;
9 }

The order of LESS files listed is important. Variables are defined in variables.less, so it should be listed first. For Bootstrap, the ordering is defined in bootstrap.less. So all you have to do is (this is the right way):
lessc bootstrap.less bootstrap-compiled.css

Just for the reference, this is the content of bpptstrap.css:
/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

// Utility classes
@import "custom.less";
@import "custom-responsive.less";
Share |
| Comment  | Tags