bootstrap.less does not compile because of errors in variables.less

[DmitryEfimenko]

In the original variables.less various variables are misplaced. For example, one variable uses another, that is not defined yet (it gets defined right after). This causes bootstrap.less not to compile.

Below is corrected version of variables.less. You are welcome to compare and see mistakes for your self:

// // Variables // --------------------------------------------------

// Global values // --------------------------------------------------

// Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff;

// Accent colors // ------------------------- @blue: #049cdb; @blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6;

// Scaffolding // ------------------------- @bodyBackground: @white; @textColor: @grayDark;

// Links // ------------------------- @linkColor: #08c; @linkColorHover: darken(@linkColor, 15%);

// Typography // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize: 14px; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily;

@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor

// Tables // ------------------------- @tableBackground: transparent; // overall background-color @tableBackgroundAccent: #f9f9f9; // for striping @tableBackgroundHover: #f5f5f5; // for hover @tableBorder: #ddd; // table and cell border

// Buttons // ------------------------- @btnBackground: @white; @btnBackgroundHighlight: darken(@white, 10%); @btnBorder: #bbb;

@btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);

@btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4;

@btnSuccessBackground: #62c462; @btnSuccessBackgroundHighlight: #51a351;

@btnWarningBackground: lighten(@orange, 15%); @btnWarningBackgroundHighlight: @orange;

@btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f;

@btnInverseBackground: #444; @btnInverseBackgroundHighlight: @grayDarker;

// Forms // ------------------------- @inputBackground: @white; @inputBorder: #ccc; @inputBorderRadius: 3px; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5;

// Dropdowns // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white;

@dropdownLinkColor: @grayDark;

@dropdownLinkColorHover: @white; @dropdownLinkColorActive: @dropdownLinkColor; @dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;

// COMPONENT VARIABLES // --------------------------------------------------

// Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1030; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050;

// Sprite icons path // ------------------------- @iconSpritePath: "/Content/images/glyphicons-halflings.png"; @iconWhiteSpritePath: "/Content/images/glyphicons-halflings-white.png";

// Input placeholder text color // ------------------------- @placeholderText: @grayLight;

// Hr border color // ------------------------- @hrBorder: @grayLighter;

// Wells // ------------------------- @wellBackground: #f5f5f5;

// Navbar // ------------------------- @navbarCollapseWidth: 979px;

@navbarHeight: 40px; @navbarBackgroundHighlight: #ffffff; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBorder: darken(@navbarBackground, 12%);

@navbarText: @gray; @navbarLinkColor: @gray; @navbarLinkColorHover: @grayDark; @navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);

@navbarBrandColor: @navbarLinkColor;

// Inverted navbar @navbarInverseBackground: #111111; @navbarInverseBackgroundHighlight: #222222; @navbarInverseBorder: #252525;

@navbarInverseText: @grayLight; @navbarInverseLinkColor: @grayLight; @navbarInverseLinkColorHover: @white; @navbarInverseLinkColorActive: @navbarInverseLinkColorHover; @navbarInverseLinkBackgroundHover: transparent; @navbarInverseLinkBackgroundActive: @navbarInverseBackground;

@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); @navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBorder: @navbarInverseBackground; @navbarInverseSearchPlaceholderColor: #ccc;

@navbarInverseBrandColor: @navbarInverseLinkColor;

// Pagination // ------------------------- @paginationBackground: #fff; @paginationBorder: #ddd; @paginationActiveBackground: #f5f5f5;

// Hero unit // ------------------------- @heroUnitBackground: @grayLighter; @heroUnitHeadingColor: inherit; @heroUnitLeadColor: inherit;

// Form states and alerts // ------------------------- @warningText: #c09853; @warningBackground: #fcf8e3; @warningBorder: darken(spin(@warningBackground, -10), 3%);

@errorText: #b94a48; @errorBackground: #f2dede; @errorBorder: darken(spin(@errorBackground, -10), 3%);

@successText: #468847; @successBackground: #dff0d8; @successBorder: darken(spin(@successBackground, -10), 5%);

@infoText: #3a87ad; @infoBackground: #d9edf7; @infoBorder: darken(spin(@infoBackground, -10), 7%);

// Tooltips and popovers // ------------------------- @tooltipColor: #fff; @tooltipBackground: #000; @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground;

@popoverBackground: #fff; @popoverArrowWidth: 10px; @popoverArrowColor: #fff; @popoverTitleBackground: darken(@popoverBackground, 3%);

// Special enhancement for popovers @popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterColor: rgba(0,0,0,.25);

// GRID // --------------------------------------------------

// Default 940px grid // ------------------------- @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min @gridColumnWidth1200: 70px; @gridGutterWidth1200: 30px; @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px @gridColumnWidth768: 42px; @gridGutterWidth768: 20px; @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

// Fluid grid // ------------------------- @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

[mdo]

We fixed the navbar and another's order in 2.1.1-wip already.

[DmitryEfimenko]

The reason I came across this issue is that I downloaded "Bootstrap, from Twitter Less Source" using nuget. I assume then 2.1.1-wip is not a part of nuget package yet?