Part 1 of unCamelCasing variables

31 files changed, 191 insertions, 196 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index c8a785fed..ce9f16857 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -131,7 +131,7 @@
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
           <h3>Built with Less</h3>
-          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
+          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@base-font-size</code> and <code>@base-line-height</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
 
 
           <hr class="bs-docs-separator">
diff --git a/docs/customize.html b/docs/customize.html
index e23a23466..16a76e3a7 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -237,16 +237,16 @@
             <div class="row download-builder">
               <div class="span3">
                 <h3>Scaffolding</h3>
-                <label>@bodyBackground</label>
+                <label>@body-background</label>
                 <input type="text" class="span3" placeholder="@white">
-                <label>@textColor</label>
+                <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
                 <h3>Links</h3>
-                <label>@linkColor</label>
+                <label>@link-color</label>
                 <input type="text" class="span3" placeholder="#08c">
-                <label>@linkColorHover</label>
-                <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+                <label>@link-color-hover</label>
+                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
                 <h3>Colors</h3>
                 <label>@blue</label>
                 <input type="text" class="span3" placeholder="#049cdb">
@@ -289,35 +289,33 @@
               <div class="span3">
 
                 <h3>Typography</h3>
-                <label>@sansFontFamily</label>
+                <label>@font-family-sans-serif</label>
                 <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
-                <label>@serifFontFamily</label>
+                <label>@font-family-serif</label>
                 <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
-                <label>@monoFontFamily</label>
+                <label>@font-family-monospace</label>
                 <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
 
-                <label>@baseFontSize</label>
+                <label>@base-font-size</label>
                 <input type="text" class="span3" placeholder="14px">
-                <label>@baseFontFamily</label>
-                <input type="text" class="span3" placeholder="@sansFontFamily">
-                <label>@baseLineHeight</label>
+                <label>@base-font-family</label>
+                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <label>@base-line-height</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@serifFontFamily">
-                <label>@headingsFontFamily</label>
+                <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@headingsFontWeight</label>
+                <label>@headings-font-weight</label>
                 <input type="text" class="span3" placeholder="bold">
                 <label>@headingsColor</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <label>@fontSizeLarge</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 1.25">
+                <input type="text" class="span3" placeholder="@base-font-size * 1.25">
                 <label>@fontSizeSmall</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.85">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
                 <label>@fontSizeMini</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.75">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.75">
 
                 <label>@paddingLarge</label>
                 <input type="text" class="span3" placeholder="11px 19px">
@@ -364,7 +362,7 @@
                 <label>@formActionsBackground</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
                 <label>@btnPrimaryBackgroundHighlight</label>
                 <input type="text" class="span3" placeholder="darken(@white, 10%)">
 
@@ -434,7 +432,7 @@
                 <label>@dropdownLinkColorHover</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@dropdownLinkBackgroundHover</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 4846f1ca3..0a1c6d1ae 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -113,8 +113,8 @@
           <ul>
             <li>Remove <code>margin</code> on the body</li>
             <li>Set <code>background-color: white;</code> on the <code>body</code></li>
-            <li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base</li>
-            <li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
+            <li>Use the <code>@base-font-family</code>, <code>@base-font-size</code>, and <code>@base-line-height</code> attributes as our typographic base</li>
+            <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
           </ul>
           <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 4be10716c..e36eca214 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -67,7 +67,7 @@
 
           {{! Using LESS }}
           <h3>{{_i}}Built with Less{{/i}}</h3>
-          <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
+          <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@base-font-size</code> and <code>@base-line-height</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
 
 
           <hr class="bs-docs-separator">
diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index 54bffd786..37490a698 100644
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -169,16 +169,16 @@
             <div class="row download-builder">
               <div class="span3">
                 <h3>{{_i}}Scaffolding{{/i}}</h3>
-                <label>@bodyBackground</label>
+                <label>@body-background</label>
                 <input type="text" class="span3" placeholder="@white">
-                <label>@textColor</label>
+                <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
                 <h3>{{_i}}Links{{/i}}</h3>
-                <label>@linkColor</label>
+                <label>@link-color</label>
                 <input type="text" class="span3" placeholder="#08c">
-                <label>@linkColorHover</label>
-                <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+                <label>@link-color-hover</label>
+                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
                 <h3>{{_i}}Colors{{/i}}</h3>
                 <label>@blue</label>
                 <input type="text" class="span3" placeholder="#049cdb">
@@ -221,35 +221,33 @@
               <div class="span3">
 
                 <h3>{{_i}}Typography{{/i}}</h3>
-                <label>@sansFontFamily</label>
+                <label>@font-family-sans-serif</label>
                 <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
-                <label>@serifFontFamily</label>
+                <label>@font-family-serif</label>
                 <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
-                <label>@monoFontFamily</label>
+                <label>@font-family-monospace</label>
                 <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
 
-                <label>@baseFontSize</label>
+                <label>@base-font-size</label>
                 <input type="text" class="span3" placeholder="14px">
-                <label>@baseFontFamily</label>
-                <input type="text" class="span3" placeholder="@sansFontFamily">
-                <label>@baseLineHeight</label>
+                <label>@base-font-family</label>
+                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <label>@base-line-height</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@serifFontFamily">
-                <label>@headingsFontFamily</label>
+                <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@headingsFontWeight</label>
+                <label>@headings-font-weight</label>
                 <input type="text" class="span3" placeholder="bold">
                 <label>@headingsColor</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <label>@fontSizeLarge</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 1.25">
+                <input type="text" class="span3" placeholder="@base-font-size * 1.25">
                 <label>@fontSizeSmall</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.85">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
                 <label>@fontSizeMini</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.75">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.75">
 
                 <label>@paddingLarge</label>
                 <input type="text" class="span3" placeholder="11px 19px">
@@ -296,7 +294,7 @@
                 <label>@formActionsBackground</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
                 <label>@btnPrimaryBackgroundHighlight</label>
                 <input type="text" class="span3" placeholder="darken(@white, 10%)">
 
@@ -366,7 +364,7 @@
                 <label>@dropdownLinkColorHover</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@dropdownLinkBackgroundHover</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 7a5bfaed7..4c7b7e89a 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -45,8 +45,8 @@
           <ul>
             <li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
             <li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li>
-            <li>{{_i}}Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base{{/i}}</li>
-            <li>{{_i}}Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
+            <li>{{_i}}Use the <code>@base-font-family</code>, <code>@base-font-size</code>, and <code>@base-line-height</code> attributes as our typographic base{{/i}}</li>
+            <li>{{_i}}Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
           </ul>
           <p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
 
diff --git a/less/accordion.less b/less/accordion.less
index 6b71deefc..697be7006 100644
--- a/less/accordion.less
+++ b/less/accordion.less
@@ -5,7 +5,7 @@
 
 // Parent container
 .accordion {
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
 }
 
 // Group == heading + body
diff --git a/less/alerts.less b/less/alerts.less
index 1425d0652..e0e3707c0 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -8,7 +8,7 @@
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   background-color: @warningBackground;
   border: 1px solid @warningBorder;
@@ -28,7 +28,7 @@
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 
 
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 541bbf50d..0c9fa252e 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -5,7 +5,7 @@
 
 .breadcrumb {
   padding: 8px 15px;
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @base-line-height;
   list-style: none;
   background-color: #f5f5f5;
   border-radius: @baseBorderRadius;
diff --git a/less/button-groups.less b/less/button-groups.less
index b6913b13c..aa45bdd6d 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -20,8 +20,8 @@
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   font-size: 0; // Hack to remove whitespace that results from using inline-block
-  margin-top: @baseLineHeight / 2;
-  margin-bottom: @baseLineHeight / 2;
+  margin-top: @base-line-height / 2;
+  margin-bottom: @base-line-height / 2;
   > .btn + .btn,
   > .btn-group + .btn,
   > .btn + .btn-group {
@@ -40,7 +40,7 @@
 .btn-group > .btn,
 .btn-group > .dropdown-menu,
 .btn-group > .popover {
-  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
+  font-size: @base-font-size; // redeclare as part 2 of font-size inline-block hack
 }
 
 // Reset fonts for other sizes
diff --git a/less/buttons.less b/less/buttons.less
index a6dc00f4c..f067cf02f 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -11,8 +11,8 @@
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0; // For input.btn
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
+  font-size: @base-font-size;
+  line-height: @base-line-height;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -178,11 +178,11 @@ input[type="button"] {
 .btn-link {
   border-color: transparent;
   cursor: pointer;
-  color: @linkColor;
+  color: @link-color;
   border-radius: 0;
 }
 .btn-link:hover {
-  color: @linkColorHover;
+  color: @link-color-hover;
   text-decoration: underline;
   background-color: transparent;
 }
diff --git a/less/carousel.less b/less/carousel.less
index a7ff59f06..a149e400d 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -5,7 +5,7 @@
 
 .carousel {
   position: relative;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   line-height: 1;
 }
 
@@ -137,7 +137,7 @@
 .carousel-caption h3,
 .carousel-caption p {
   color: @white;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 .carousel-caption h3 {
   margin: 0 0 5px;
diff --git a/less/close.less b/less/close.less
index c71a508f3..9a3bfbffb 100644
--- a/less/close.less
+++ b/less/close.less
@@ -7,7 +7,7 @@
   float: right;
   font-size: 20px;
   font-weight: bold;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   color: @black;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(20);
diff --git a/less/code.less b/less/code.less
index 778a41beb..5a3256dda 100644
--- a/less/code.less
+++ b/less/code.less
@@ -8,7 +8,7 @@ code,
 pre {
   padding: 0 3px 2px;
   #font > #family > .monospace;
-  font-size: @baseFontSize - 2;
+  font-size: @base-font-size - 2;
   color: @grayDark;
   border-radius: 4px;
 }
@@ -25,10 +25,10 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight / 2;
-  font-size: @baseFontSize - 1; // 14px to 13px
-  line-height: @baseLineHeight;
+  padding: (@base-line-height - 1) / 2;
+  margin: 0 0 @base-line-height / 2;
+  font-size: @base-font-size - 1; // 14px to 13px
+  line-height: @base-line-height;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -40,7 +40,7 @@ pre {
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: @base-line-height;
   }
 
   // Account for some code outputs that place code tags in pre tags
diff --git a/less/dropdowns.less b/less/dropdowns.less
index aad993f6f..d7f5d4ad0 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -69,7 +69,7 @@
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     color: @dropdownLinkColor;
     white-space: nowrap;
   }
diff --git a/less/forms.less b/less/forms.less
index 5115f0c23..071e33c88 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -7,7 +7,7 @@
 // -------------------------
 
 form {
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @base-line-height;
 }
 
 fieldset {
@@ -20,9 +20,9 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize * 1.5;
-  line-height: @baseLineHeight * 2;
+  margin-bottom: @base-line-height;
+  font-size: @base-font-size * 1.5;
+  line-height: @base-line-height * 2;
   color: @grayDark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -59,9 +59,9 @@ input[type="color"],
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
   min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
-  margin-bottom: @baseLineHeight / 2;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
+  margin-bottom: @base-line-height / 2;
+  font-size: @base-font-size;
+  line-height: @base-line-height;
   color: @gray;
   vertical-align: middle;
   background-color: @inputBackground;
@@ -201,7 +201,7 @@ textarea {
 .radio,
 .checkbox {
   display: block;
-  min-height: @baseLineHeight; // clear the floating input if there is no label text
+  min-height: @base-line-height; // clear the floating input if there is no label text
   padding-left: 20px;
 }
 .radio label,
@@ -390,9 +390,9 @@ select:focus:invalid {
 // ------------
 
 .form-actions {
-  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
-  margin-top: @baseLineHeight;
-  margin-bottom: @baseLineHeight;
+  padding: (@base-line-height - 1) 20px @base-line-height;
+  margin-top: @base-line-height;
+  margin-bottom: @base-line-height;
   background-color: @formActionsBackground;
   border-top: 1px solid #e5e5e5;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
@@ -405,12 +405,12 @@ select:focus:invalid {
 
 .help-block,
 .help-inline {
-  color: lighten(@textColor, 25%); // lighten the text some for contrast
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
 
 .help-block {
   display: block; // account for any element using help-block
-  margin-bottom: @baseLineHeight / 2;
+  margin-bottom: @base-line-height / 2;
 }
 
 .help-inline {
@@ -436,7 +436,7 @@ select:focus:invalid {
   select,
   .uneditable-input,
   .dropdown-menu {
-    font-size: @baseFontSize;
+    font-size: @base-font-size;
   }
 
   input,
@@ -445,7 +445,7 @@ select:focus:invalid {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     float: none; // Undo the float from grid sizing
     margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
-    font-size: @baseFontSize;
+    font-size: @base-font-size;
     vertical-align: top;
     border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
     // Make input on top when focused so blue border and shadow always show
@@ -461,12 +461,12 @@ select:focus:invalid {
   .add-on {
     display: inline-block;
     width: auto;
-    height: @baseLineHeight;
+    height: @base-line-height;
     min-width: 16px;
     padding: 6px;
-    font-size: @baseFontSize;
+    font-size: @base-font-size;
     font-weight: normal;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     text-align: center;
     text-shadow: 0 1px 0 @white;
     background-color: @grayLighter;
@@ -642,12 +642,12 @@ input.search-query {
 
 // Margin to space out fieldsets
 .control-group {
-  margin-bottom: @baseLineHeight / 2;
+  margin-bottom: @base-line-height / 2;
 }
 
 // Legend collapses margin, so next element is responsible for spacing
 legend + .control-group {
-  margin-top: @baseLineHeight;
+  margin-top: @base-line-height;
   -webkit-margin-top-collapse: separate;
 }
 
@@ -657,7 +657,7 @@ legend + .control-group {
 .form-horizontal {
   // Increase spacing between groups
   .control-group {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: @base-line-height;
     .clearfix();
   }
   // Float the labels left
@@ -683,7 +683,7 @@ legend + .control-group {
   .input-prepend,
   .input-append {
     + .help-block {
-      margin-top: @baseLineHeight / 2;
+      margin-top: @base-line-height / 2;
     }
   }
   // Move over buttons in .form-actions to align with .controls
diff --git a/less/hero-unit.less b/less/hero-unit.less
index 4b350983e..47f0a9583 100644
--- a/less/hero-unit.less
+++ b/less/hero-unit.less
@@ -8,7 +8,7 @@
   margin-bottom: 30px;
   font-size: 18px;
   font-weight: 200;
-  line-height: @baseLineHeight * 1.5;
+  line-height: @base-line-height * 1.5;
   color: @heroUnitLeadColor;
   background-color: @heroUnitBackground;
   border-radius: 6px;
@@ -20,6 +20,6 @@
     letter-spacing: -1px;
   }
   li {
-    line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less
+    line-height: @base-line-height * 1.5; // Reset since we specify in type.less
   }
 }
diff --git a/less/labels-badges.less b/less/labels-badges.less
index 5c8b1c25f..9dd4cb2b7 100644
--- a/less/labels-badges.less
+++ b/less/labels-badges.less
@@ -8,7 +8,7 @@
 .badge {
   display: inline-block;
   padding: 2px 4px;
-  font-size: @baseFontSize * .846;
+  font-size: @base-font-size * .846;
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
   color: @white;
diff --git a/less/mixins.less b/less/mixins.less
index 467ce14c1..e1d319032 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -92,29 +92,29 @@
 #font {
   #family {
     .serif() {
-      font-family: @serifFontFamily;
+      font-family: @font-family-serif;
     }
     .sans-serif() {
-      font-family: @sansFontFamily;
+      font-family: @font-family-sans-serif;
     }
     .monospace() {
-      font-family: @monoFontFamily;
+      font-family: @font-family-monospace;
     }
   }
-  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .shorthand(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     #font > #family > .serif;
     #font > .shorthand(@size, @weight, @lineHeight);
   }
-  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .sans-serif(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     #font > #family > .sans-serif;
     #font > .shorthand(@size, @weight, @lineHeight);
   }
-  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+  .monospace(@size: @base-font-size, @weight: normal, @lineHeight: @base-line-height) {
     #font > #family > .monospace;
     #font > .shorthand(@size, @weight, @lineHeight);
   }
@@ -133,12 +133,12 @@
 
 
 // Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+.formFieldState(@text-color: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
   // Set the text color
   .control-label,
   .help-block,
   .help-inline {
-    color: @textColor;
+    color: @text-color;
   }
   // Style inputs accordingly
   .checkbox,
@@ -146,7 +146,7 @@
   input,
   select,
   textarea {
-    color: @textColor;
+    color: @text-color;
   }
   input,
   select,
@@ -162,9 +162,9 @@
   // Give a small background color for input-prepend/-append
   .input-prepend .add-on,
   .input-append .add-on {
-    color: @textColor;
+    color: @text-color;
     background-color: @backgroundColor;
-    border-color: @textColor;
+    border-color: @text-color;
   }
 }
 
@@ -421,7 +421,7 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@top: #e5e5e5, @bottom: @white) {
   height: 1px;
-  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
+  margin: ((@base-line-height / 2) - 1) 1px; // 8px 1px
   overflow: hidden;
   background-color: @top;
   border-bottom: 1px solid @bottom;
@@ -429,8 +429,8 @@
 
 // Button backgrounds
 // ------------------
-.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  color: @textColor;
+.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  color: @text-color;
   text-shadow: @textShadow;
   #gradient > .vertical(@startColor, @endColor);
   border-color: @endColor @endColor darken(@endColor, 15%);
@@ -439,7 +439,7 @@
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled] {
-    color: @textColor;
+    color: @text-color;
     background-color: @endColor;
   }
 
diff --git a/less/navbar.less b/less/navbar.less
index 2ed93d7f8..1578ddcc7 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -10,7 +10,7 @@
 .navbar {
   overflow: visible;
   padding: 0 20px;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
   border: 1px solid @navbarBorder;
   border-radius: @baseBorderRadius;
@@ -39,7 +39,7 @@
   float: left;
   display: block;
   // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
+  padding: ((@navbarHeight - @base-line-height) / 2) 20px ((@navbarHeight - @base-line-height) / 2);
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
@@ -215,7 +215,7 @@
 .navbar .nav > li > a {
   float: none;
   // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
+  padding: ((@navbarHeight - @base-line-height) / 2) 15px ((@navbarHeight - @base-line-height) / 2);
   color: @navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
diff --git a/less/navs.less b/less/navs.less
index ac3ff6aa4..6c8753c66 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -8,7 +8,7 @@
 
 .nav {
   margin-left: 0;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   list-style: none;
   .clearfix();
 }
@@ -41,7 +41,7 @@
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   color: @grayLight;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
@@ -72,7 +72,7 @@
 // Actual tabs (as links)
 .nav-tabs > li > a {
   margin-right: 2px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
   &:hover {
@@ -83,7 +83,7 @@
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover {
   color: @gray;
-  background-color: @bodyBackground;
+  background-color: @body-background;
   border: 1px solid #ddd;
   border-bottom-color: transparent;
   cursor: default;
@@ -106,7 +106,7 @@
 .nav-pills > .active > a,
 .nav-pills > .active > a:hover {
   color: @white;
-  background-color: @linkColor;
+  background-color: @link-color;
 }
 
 // Stacked pills
@@ -167,7 +167,7 @@
   padding: 9px 15px;
   color: #fff;
   text-shadow: 0 1px 0 rgba(0,0,0,.15);
-  background-color: @linkColor;
+  background-color: @link-color;
   border-width: 0;
   .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
 }
@@ -186,13 +186,13 @@
 // -------------------------
 // Make carets use linkColor to start
 .nav .dropdown-toggle .caret {
-  border-top-color: @linkColor;
-  border-bottom-color: @linkColor;
+  border-top-color: @link-color;
+  border-bottom-color: @link-color;
   margin-top: 8px;
 }
 .nav .dropdown-toggle:hover .caret {
-  border-top-color: @linkColorHover;
-  border-bottom-color: @linkColorHover;
+  border-top-color: @link-color-hover;
+  border-bottom-color: @link-color-hover;
 }
 
 // Active dropdown links
diff --git a/less/pager.less b/less/pager.less
index 809ed3a9a..3db1f8f99 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -4,7 +4,7 @@
 
 
 .pager {
-  margin: @baseLineHeight 0;
+  margin: @base-line-height 0;
   list-style: none;
   text-align: center;
   .clearfix();
diff --git a/less/pagination.less b/less/pagination.less
index 0056b3c9c..36d67a7d9 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -4,7 +4,7 @@
 
 // Space out pagination from surrounding content
 .pagination {
-  margin: @baseLineHeight 0;
+  margin: @base-line-height 0;
 }
 
 .pagination ul {
@@ -24,7 +24,7 @@
 .pagination ul > li > span {
   float: left; // Collapse white-space
   padding: 4px 12px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   text-decoration: none;
   background-color: @paginationBackground;
   border: 1px solid @paginationBorder;
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 584ef96bb..5e3efc2af 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -44,8 +44,8 @@
 // Outer container
 .progress {
   overflow: hidden;
-  height: @baseLineHeight;
-  margin-bottom: @baseLineHeight;
+  height: @base-line-height;
+  margin-bottom: @base-line-height;
   #gradient > .vertical(#f5f5f5, #f9f9f9);
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
   border-radius: @baseBorderRadius;
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index c967c517b..5104457a6 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -104,7 +104,7 @@
   // Block level the page header small tag for readability
   .page-header h1 small {
     display: block;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
   }
 
   // Update checkboxes for iOS
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index 190ebb858..6e76d7ed1 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -19,10 +19,10 @@
     position: static;
   }
   .navbar-fixed-top {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: @base-line-height;
   }
   .navbar-fixed-bottom {
-    margin-top: @baseLineHeight;
+    margin-top: @base-line-height;
   }
   .navbar-fixed-top,
   .navbar-fixed-bottom {
@@ -48,7 +48,7 @@
   // Block-level the nav
   .nav-collapse .nav {
     float: none;
-    margin: 0 0 (@baseLineHeight / 2);
+    margin: 0 0 (@base-line-height / 2);
   }
   .nav-collapse .nav > li {
     float: none;
@@ -133,8 +133,8 @@
   .nav-collapse .navbar-form,
   .nav-collapse .navbar-search {
     float: none;
-    padding: (@baseLineHeight / 2) 15px;
-    margin: (@baseLineHeight / 2) 0;
+    padding: (@base-line-height / 2) 15px;
+    margin: (@base-line-height / 2) 0;
     border-top: 1px solid @navbarBackground;
     border-bottom: 1px solid @navbarBackground;
     .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 368a2ac01..7a2e0b1ce 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -8,8 +8,8 @@
 
 body {
   margin: 0;
-  color: @textColor;
-  background-color: @bodyBackground;
+  color: @text-color;
+  background-color: @body-background;
 }
 
 // Reset fonts for revelant elements
@@ -18,9 +18,9 @@ input,
 button,
 select,
 textarea {
-  font-family: @baseFontFamily;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
+  font-family: @base-font-family;
+  font-size: @base-font-size;
+  line-height: @base-line-height;
 }
 
 
@@ -28,11 +28,11 @@ textarea {
 // -------------------------
 
 a {
-  color: @linkColor;
+  color: @link-color;
   text-decoration: none;
 }
 a:hover {
-  color: @linkColorHover;
+  color: @link-color-hover;
   text-decoration: underline;
 }
 
diff --git a/less/tables.less b/less/tables.less
index 9671be9bc..d3e65e094 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -17,12 +17,12 @@ table {
 
 .table {
   width: 100%;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   // Cells
   th,
   td {
     padding: 8px;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     text-align: left;
     vertical-align: top;
     border-top: 1px solid @tableBorder;
diff --git a/less/thumbnails.less b/less/thumbnails.less
index d2a23c7f3..9e533ecb0 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -7,7 +7,7 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
   border: 1px solid #ddd;
   border-radius: @baseBorderRadius;
   .box-shadow(0 1px 3px rgba(0,0,0,.055));
@@ -15,7 +15,7 @@
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
-  border-color: @linkColor;
+  border-color: @link-color;
   .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
 
diff --git a/less/type.less b/less/type.less
index ec1c40ed7..cef08a512 100644
--- a/less/type.less
+++ b/less/type.less
@@ -7,13 +7,13 @@
 // -------------------------
 
 p {
-  margin: 0 0 @baseLineHeight / 2;
+  margin: 0 0 @base-line-height / 2;
 }
 .lead {
-  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize * 1.5;
+  margin-bottom: @base-line-height;
+  font-size: @base-font-size * 1.5;
   font-weight: 200;
-  line-height: @baseLineHeight * 1.5;
+  line-height: @base-line-height * 1.5;
 }
 
 
@@ -48,10 +48,10 @@ a.text-success:hover { color: darken(@successText, 10%); }
 // -------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: (@baseLineHeight / 2) 0;
-  font-family: @headingsFontFamily;
-  font-weight: @headingsFontWeight;
-  line-height: @baseLineHeight;
+  margin: (@base-line-height / 2) 0;
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  line-height: @base-line-height;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
     font-weight: normal;
@@ -62,27 +62,27 @@ h1, h2, h3, h4, h5, h6 {
 
 h1,
 h2,
-h3 { line-height: @baseLineHeight * 2; }
+h3 { line-height: @base-line-height * 2; }
 
-h1 { font-size: @baseFontSize * 2.75; } // ~38px
-h2 { font-size: @baseFontSize * 2.25; } // ~32px
-h3 { font-size: @baseFontSize * 1.75; } // ~24px
-h4 { font-size: @baseFontSize * 1.25; } // ~18px
-h5 { font-size: @baseFontSize; }
-h6 { font-size: @baseFontSize * 0.85; } // ~12px
+h1 { font-size: @base-font-size * 2.75; } // ~38px
+h2 { font-size: @base-font-size * 2.25; } // ~32px
+h3 { font-size: @base-font-size * 1.75; } // ~24px
+h4 { font-size: @base-font-size * 1.25; } // ~18px
+h5 { font-size: @base-font-size; }
+h6 { font-size: @base-font-size * 0.85; } // ~12px
 
-h1 small { font-size: @baseFontSize * 1.75; } // ~24px
-h2 small { font-size: @baseFontSize * 1.25; } // ~18px
-h3 small { font-size: @baseFontSize; }
-h4 small { font-size: @baseFontSize; }
+h1 small { font-size: @base-font-size * 1.75; } // ~24px
+h2 small { font-size: @base-font-size * 1.25; } // ~18px
+h3 small { font-size: @base-font-size; }
+h4 small { font-size: @base-font-size; }
 
 
 // Page header
 // -------------------------
 
 .page-header {
-  padding-bottom: (@baseLineHeight / 2) - 1;
-  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
+  padding-bottom: (@base-line-height / 2) - 1;
+  margin: @base-line-height 0 (@base-line-height * 1.5);
   border-bottom: 1px solid @grayLighter;
 }
 
@@ -94,7 +94,7 @@ h4 small { font-size: @baseFontSize; }
 // Unordered and Ordered lists
 ul, ol {
   padding: 0;
-  margin: 0 0 @baseLineHeight / 2 25px;
+  margin: 0 0 @base-line-height / 2 25px;
 }
 ul ul,
 ul ol,
@@ -103,7 +103,7 @@ ol ul {
   margin-bottom: 0;
 }
 li {
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 
 // List options
@@ -123,17 +123,17 @@ li {
 
 // Description Lists
 dl {
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
 }
 dt,
 dd {
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
 dt {
   font-weight: bold;
 }
 dd {
-  margin-left: @baseLineHeight / 2;
+  margin-left: @base-line-height / 2;
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
@@ -155,7 +155,7 @@ dd {
 
 // Horizontal rules
 hr {
-  margin: @baseLineHeight 0;
+  margin: @base-line-height 0;
   border: 0;
   border-top: 1px solid @hrBorder;
   border-bottom: 1px solid @white;
@@ -176,15 +176,15 @@ abbr.initialism {
 // Blockquotes
 blockquote {
   padding: 0 0 0 15px;
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @base-line-height;
   border-left: 5px solid @grayLighter;
   p {
     margin-bottom: 0;
-    #font > .shorthand(16px,300,@baseLineHeight * 1.25);
+    #font > .shorthand(16px,300,@base-line-height * 1.25);
   }
   small {
     display: block;
-    line-height: @baseLineHeight;
+    line-height: @base-line-height;
     color: @grayLight;
     &:before {
       content: '\2014 \00A0';
@@ -224,7 +224,7 @@ blockquote:after {
 // Addresses
 address {
   display: block;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: @base-line-height;
   font-style: normal;
-  line-height: @baseLineHeight;
+  line-height: @base-line-height;
 }
diff --git a/less/variables.less b/less/variables.less
index 2b4574f6a..26a3ca70c 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -31,38 +31,37 @@
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        @white;
-@textColor:             @grayDark;
+@body-background:         @white;
+@text-color:              @grayDark;
 
 
 // Links
 // -------------------------
-@linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15%);
+@link-color:              #08c;
+@link-color-hover:        darken(@link-color, 15%);
 
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
-@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 
-@baseFontSize:          14px;
-@baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        20px;
-@altFontFamily:         @serifFontFamily;
+@base-font-size:          14px;
+@base-font-family:        @font-family-sans-serif;
+@base-line-height:        20px;
 
-@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
+@headings-font-family:    inherit; // empty to use BS default, @base-font-family
+@headings-font-weight:    bold;    // instead of browser default, bold
 
 
 // Component sizing
 // -------------------------
 // Based on 14px font-size and 20px line-height
 
-@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
-@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
-@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+@fontSizeLarge:         @base-font-size * 1.25; // ~18px
+@fontSizeSmall:         @base-font-size * 0.85; // ~12px
+@fontSizeMini:          @base-font-size * 0.75; // ~11px
 
 @paddingLarge:          11px 19px; // 44px
 @paddingSmall:          2px 10px;  // 26px
@@ -87,7 +86,7 @@
 @btnBackgroundHighlight:            darken(@white, 10%);
 @btnBorder:                         #bbb;
 
-@btnPrimaryBackground:              @linkColor;
+@btnPrimaryBackground:              @link-color;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
 
 @btnInfoBackground:                 #5bc0de;
@@ -114,7 +113,7 @@
 @inputSearchBorderRadius:       20px;
 @inputDisabledBackground:       @grayLighter;
 @formActionsBackground:         #f5f5f5;
-@inputHeight:                   @baseLineHeight + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
+@inputHeight:                   @base-line-height + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
@@ -128,7 +127,7 @@
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 
-@dropdownLinkBackgroundActive:  @linkColor;
+@dropdownLinkBackgroundActive:  @link-color;
 @dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;