Merge pull request #1 from twbs/scss

Move to Sass

less/mixins/media-queries.less

-// Media query mixins
-
-.media-xs(@rules) {
-  @media (max-width: @screen-xs-max) { @rules(); }
-}
-
-.media-sm(@rules) {
-  @media (min-width: @screen-sm-min) { @rules(); }
-}
-
-.media-sm-max(@rules) {
-  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @rules(); }
-}
-
-.media-md(@rules) {
-  @media (min-width: @screen-md-min) { @rules(); }
-}
-
-.media-md-max(@rules) {
-  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @rules(); }
-}
-
-.media-lg(@rules) {
-  @media (min-width: @screen-lg-min) { @rules(); }
-}
-

less/mixins/responsive-visibility.less

-// Responsive utilities
-
-//
-// More easily include all the states for responsive-utilities.less.
-.responsive-visibility() {
-  display: block !important;
-  table&  { display: table; }
-  tr&     { display: table-row !important; }
-  th&,
-  td&     { display: table-cell !important; }
-}
-
-.responsive-invisibility() {
-  display: none !important;
-}

less/mixins/size.less

-// Sizing shortcuts
-
-.size(@width; @height) {
-  width: @width;
-  height: @height;
-}
-
-.square(@size) {
-  .size(@size; @size);
-}

less/mixins/text-emphasis.less

-// Typography
-
-.text-emphasis-variant(@color) {
-  color: @color;
-  a&:hover {
-    color: darken(@color, 10%);
-  }
-}

package.json

@@ -44,7 +44,6 @@
     "grunt-contrib-cssmin": "~0.10.0",
     "grunt-contrib-jade": "~0.13.0",
     "grunt-contrib-jshint": "~0.10.0",
-    "grunt-contrib-less": "~0.12.0",
     "grunt-contrib-qunit": "~0.5.2",
     "grunt-contrib-uglify": "~0.6.0",
     "grunt-contrib-watch": "~0.6.1",
@@ -53,6 +52,7 @@
     "grunt-html-validation": "~0.1.18",
     "grunt-jekyll": "~0.4.2",
     "grunt-jscs": "~1.0.0",
+    "grunt-sass": "~0.16.0",
     "grunt-saucelabs": "~8.3.3",
     "grunt-sed": "~0.1.1",
     "load-grunt-tasks": "~1.0.0",

less/_alert.less → scss/_alert.scss

@@ -7,20 +7,20 @@
 // -------------------------
 
 .alert {
-  padding: @alert-padding;
-  margin-bottom: @line-height-computed;
+  padding: $alert-padding;
+  margin-bottom: $line-height-computed;
   border: 1px solid transparent;
-  .border-radius(@alert-border-radius);
+  @include border-radius($alert-border-radius);
 
   // Headings for larger alerts
   h4 {
     margin-top: 0;
-    // Specified for the h4 to prevent conflicts of changing @headings-color
+    // Specified for the h4 to prevent conflicts of changing $headings-color
     color: inherit;
   }
   // Provide class for links that match alerts
   .alert-link {
-    font-weight: @alert-link-font-weight;
+    font-weight: $alert-link-font-weight;
   }
 
   // Improve alignment and spacing of inner content
@@ -38,7 +38,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: (@alert-padding + 20);
+  padding-right: ($alert-padding + 20);
 
   // Adjust close link position
   .close {
@@ -54,14 +54,14 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 .alert-success {
-  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
+  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
 }
 .alert-info {
-  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
+  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
 }
 .alert-warning {
-  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
+  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
 }
 .alert-danger {
-  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
+  @include alert-variant($alert-danger-bg, $alert-danger-border,$alert-danger-text);
 }

less/_animation.less → scss/_animation.scss

@@ -5,6 +5,7 @@
 .fade {
   opacity: 0;
   transition: opacity .15s linear;
+
   &.in {
     opacity: 1;
   }
@@ -14,9 +15,12 @@
   display: none;
   visibility: hidden;
 
-  &.in      { display: block; visibility: visible; }
-  tr&.in    { display: table-row; }
-  tbody&.in { display: table-row-group; }
+  &.in {
+    display: block;
+    visibility: visible;
+  }
+  // tr&.in    { display: table-row; }
+  // tbody&.in { display: table-row-group; }
 }
 
 .collapsing {

less/_badge.less → scss/_badge.scss

@@ -11,12 +11,12 @@
   padding-left: .6em;
   padding-right: .6em;
   font-size: .75em;
-  font-weight: @badge-font-weight;
-  color: @badge-color;
+  font-weight: $badge-font-weight;
+  color: $badge-color;
   text-align: center;
   white-space: nowrap;
-  background-color: @badge-bg;
-  .border-radius(@badge-border-radius);
+  background-color: $badge-bg;
+  @include border-radius($badge-border-radius);
 
   // Empty badges collapse automatically
   &:empty {
@@ -28,21 +28,11 @@
     top: .2em;
   }
 
-  // Hover state, but only for links
-  a& {
-    &:hover,
-    &:focus {
-      color: @badge-link-hover-color;
-      text-decoration: none;
-      cursor: pointer;
-    }
-  }
-
   // Account for badges in navs
   .list-group-item.active > &,
   .nav-pills > .active > a > & {
-    color: @badge-active-color;
-    background-color: @badge-active-bg;
+    color: $badge-active-color;
+    background-color: $badge-active-bg;
   }
   .list-group-item > & {
     float: right;
@@ -54,3 +44,13 @@
     margin-left: 3px;
   }
 }
+
+// Hover state, but only for links
+a.badge {
+  &:hover,
+  &:focus {
+    color: $badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}

less/_breadcrumb.less → scss/_breadcrumb.scss

@@ -4,24 +4,24 @@
 
 
 .breadcrumb {
-  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
-  margin-bottom: @line-height-computed;
+  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
+  margin-bottom: $line-height-computed;
   list-style: none;
-  background-color: @breadcrumb-bg;
-  .border-radius(@border-radius-base);
+  background-color: $breadcrumb-bg;
+  @include border-radius($border-radius-base);
 
   > li {
     display: inline-block;
 
     + li:before {
-      content: "@{breadcrumb-divider}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
+      content: "#{breadcrumb-divider}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
       padding-left: .5rem;
       padding-right: .5rem;
-      color: @breadcrumb-divider-color;
+      color: $breadcrumb-divider-color;
     }
   }
 
   > .active {
-    color: @breadcrumb-active-color;
+    color: $breadcrumb-active-color;
   }
 }

less/_button-group.less → scss/_button-group.scss

@@ -8,9 +8,11 @@
   position: relative;
   display: inline-block;
   vertical-align: middle; // match .btn alignment given font-size hack above
+
   > .btn {
     position: relative;
     float: left;
+
     // Bring the "active" button to the front
     &:hover,
     &:focus,
@@ -34,12 +36,13 @@
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   margin-left: -5px; // Offset the first child's margin
-  &:extend(.clearfix all);
+  @include clearfix();
 
   .btn-group,
   .input-group {
     float: left;
   }
+
   > .btn,
   > .btn-group,
   > .input-group {
@@ -54,14 +57,15 @@
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
+
   &:not(:last-child):not(.dropdown-toggle) {
-    .border-right-radius(0);
+    @include border-right-radius(0);
   }
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
-  .border-left-radius(0);
+  @include border-left-radius(0);
 }
 
 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
@@ -74,11 +78,11 @@
 .btn-group > .btn-group:first-child {
   > .btn:last-child,
   > .dropdown-toggle {
-    .border-right-radius(0);
+    @include border-right-radius(0);
   }
 }
 .btn-group > .btn-group:last-child > .btn:first-child {
-  .border-left-radius(0);
+  @include border-left-radius(0);
 }
 
 // On active and open, don't show outline
@@ -92,9 +96,9 @@
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-xs > .btn { &:extend(.btn-xs); }
-.btn-group-sm > .btn { &:extend(.btn-sm); }
-.btn-group-lg > .btn { &:extend(.btn-lg); }
+.btn-group-xs > .btn { @extend .btn-xs; }
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
 
 
 // Split button dropdowns
@@ -113,11 +117,11 @@
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {
-  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
 
   // Show no shadow for `.btn-link` since it has no other button styles.
   &.btn-link {
-    .box-shadow(none);
+    @include box-shadow(none);
   }
 }
 
@@ -128,12 +132,12 @@
 }
 // Carets in other button sizes
 .btn-lg .caret {
-  border-width: @caret-width-large @caret-width-large 0;
+  border-width: $caret-width-large $caret-width-large 0;
   border-bottom-width: 0;
 }
 // Upside down carets for .dropup
 .dropup .btn-lg .caret {
-  border-width: 0 @caret-width-large @caret-width-large;
+  border-width: 0 $caret-width-large $caret-width-large;
 }
 
 
@@ -152,7 +156,8 @@
 
   // Clear floats so dropdown menus can be properly placed
   > .btn-group {
-    &:extend(.clearfix all);
+    @include clearfix();
+
     > .btn {
       float: none;
     }
@@ -172,12 +177,12 @@
     border-radius: 0;
   }
   &:first-child:not(:last-child) {
-    border-top-right-radius: @border-radius-base;
-    .border-bottom-radius(0);
+    border-top-right-radius: $border-radius-base;
+    @include border-bottom-radius(0);
   }
   &:last-child:not(:first-child) {
-    border-bottom-left-radius: @border-radius-base;
-    .border-top-radius(0);
+    border-bottom-left-radius: $border-radius-base;
+    @include border-top-radius(0);
   }
 }
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
@@ -186,11 +191,11 @@
 .btn-group-vertical > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
-    .border-bottom-radius(0);
+    @include border-bottom-radius(0);
   }
 }
 .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  .border-top-radius(0);
+  @include border-top-radius(0);
 }
 
 
@@ -202,12 +207,14 @@
   width: 100%;
   table-layout: fixed;
   border-collapse: separate;
+
   > .btn,
   > .btn-group {
     float: none;
     display: table-cell;
     width: 1%;
   }
+
   > .btn-group .btn {
     width: 100%;
   }

less/_buttons.less → scss/_buttons.scss

@@ -9,24 +9,24 @@
 .btn {
   display: inline-block;
   margin-bottom: 0; // For input.btn
-  font-weight: @btn-font-weight;
+  font-weight: $btn-font-weight;
   text-align: center;
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: @border-width solid transparent;
+  border: $border-width solid transparent;
   white-space: nowrap;
-  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
+  @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
   user-select: none;
-  .transition(all .2s ease-in-out);
+  transition: all .2s ease-in-out;
 
   &,
   &:active,
   &.active {
     &:focus,
     &.focus {
-      .tab-focus();
+      @include tab-focus();
     }
   }
 
@@ -40,16 +40,16 @@
   &.active {
     outline: 0;
     background-image: none;
-    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
   }
 
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-    cursor: @cursor-disabled;
+    cursor: $cursor-disabled;
     pointer-events: none; // Future-proof disabling of clicks
     opacity: .65;
-    .box-shadow(none);
+    @include box-shadow(none);
   }
 }
 
@@ -58,22 +58,22 @@
 // --------------------------------------------------
 
 .btn-primary {
-  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 }
 .btn-secondary {
-  .button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border);
+  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
 }
 .btn-info {
-  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
 }
 .btn-success {
-  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
+  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
 }
 .btn-warning {
-  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
+  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
 }
 .btn-danger {
-  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
+  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
 }
 
 
@@ -82,7 +82,7 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  color: @link-color;
+  color: $link-color;
   font-weight: normal;
   border-radius: 0;
 
@@ -92,7 +92,7 @@
   &[disabled],
   fieldset[disabled] & {
     background-color: transparent;
-    .box-shadow(none);
+    @include box-shadow(none);
   }
   &,
   &:hover,
@@ -102,7 +102,7 @@
   }
   &:hover,
   &:focus {
-    color: @link-hover-color;
+    color: $link-hover-color;
     text-decoration: underline;
     background-color: transparent;
   }
@@ -110,7 +110,7 @@
   fieldset[disabled] & {
     &:hover,
     &:focus {
-      color: @btn-link-disabled-color;
+      color: $btn-link-disabled-color;
       text-decoration: none;
     }
   }
@@ -122,14 +122,14 @@
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  .button-size(@padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @border-radius-lg);
+  @include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  .button-size(@padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @border-radius-sm);
+  @include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm);
 }
 .btn-xs {
-  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-xs; @line-height-sm; @border-radius-sm);
+  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $border-radius-sm);
 }
 
 

less/_card.less → scss/_card.scss

@@ -33,13 +33,13 @@
   padding: .75rem 1.25rem;
   margin: -1.25rem -1.25rem 1.25rem;
   border-bottom: .075rem solid #eee;
-  .border-radius(.25rem .25rem 0 0);
+  @include border-radius(.25rem .25rem 0 0);
 }
 .card-footer {
   padding: .75rem 1.25rem;
   margin: 1.25rem -1.25rem -1.25rem;
   border-top: .075rem solid #eee;
-  .border-radius(0 0 .25rem .25rem);
+  @include border-radius(0 0 .25rem .25rem);
 }
 
 
@@ -48,24 +48,24 @@
 //
 
 .card-primary {
-  background-color: @brand-primary;
-  border-color: @brand-primary;
+  background-color: $brand-primary;
+  border-color: $brand-primary;
 }
 .card-success {
-  background-color: @brand-success;
-  border-color: @brand-success;
+  background-color: $brand-success;
+  border-color: $brand-success;
 }
 .card-info {
-  background-color: @brand-info;
-  border-color: @brand-info;
+  background-color: $brand-info;
+  border-color: $brand-info;
 }
 .card-warning {
-  background-color: @brand-warning;
-  border-color: @brand-warning;
+  background-color: $brand-warning;
+  border-color: $brand-warning;
 }
 .card-danger {
-  background-color: @brand-danger;
-  border-color: @brand-danger;
+  background-color: $brand-danger;
+  border-color: $brand-danger;
 }
 
 
@@ -109,7 +109,7 @@
 // Card image
 .card-img {
   margin: -1.325rem;
-  .border-radius(.25rem);
+  @include border-radius(.25rem);
 }
 .card-img-overlay {
   position: absolute;
@@ -125,11 +125,11 @@
 // Card image caps
 .card-img-top {
   margin: -1.325rem -1.325rem 1.25rem;
-  .border-radius(.25rem .25rem 0 0);
+  @include border-radius(.25rem .25rem 0 0);
 }
 .card-img-bottom {
   margin: 1.25rem -1.325rem -1.325rem;
-  .border-radius(0 0 .25rem .25rem);
+  @include border-radius(0 0 .25rem .25rem);
 }
 
 

less/_carousel.less → scss/_carousel.scss

@@ -21,7 +21,7 @@
     // Account for jankitude on images
     > img,
     > a > img {
-      &:extend(.img-responsive);
+      @extend .img-responsive;
       line-height: 1;
     }
 
@@ -95,30 +95,30 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: @carousel-control-width;
-  opacity: @carousel-control-opacity;
-  font-size: @carousel-control-font-size;
-  color: @carousel-control-color;
+  width: $carousel-control-width;
+  opacity: $carousel-control-opacity;
+  font-size: $carousel-control-font-size;
+  color: $carousel-control-color;
   text-align: center;
-  text-shadow: @carousel-text-shadow;
+  text-shadow: $carousel-text-shadow;
   // We can't have this transition here because WebKit cancels the carousel
   // animation if you trip this while in the middle of another animation.
 
   // Set gradients for backgrounds
   &.left {
-    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
+    @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
   }
   &.right {
     left: auto;
     right: 0;
-    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
+    @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
   }
 
   // Hover/focus state
   &:hover,
   &:focus {
     outline: 0;
-    color: @carousel-control-color;
+    color: $carousel-control-color;
     text-decoration: none;
     opacity: .9;
   }
@@ -178,7 +178,7 @@
     height: 10px;
     margin: 1px;
     text-indent: -999px;
-    border: 1px solid @carousel-indicator-border-color;
+    border: 1px solid $carousel-indicator-border-color;
     border-radius: 10px;
     cursor: pointer;
 
@@ -193,7 +193,7 @@
     margin: 0;
     width:  12px;
     height: 12px;
-    background-color: @carousel-indicator-active-bg;
+    background-color: $carousel-indicator-active-bg;
   }
 }
 
@@ -208,9 +208,10 @@
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: @carousel-caption-color;
+  color: $carousel-caption-color;
   text-align: center;
-  text-shadow: @carousel-text-shadow;
+  text-shadow: $carousel-text-shadow;
+
   & .btn {
     text-shadow: none; // No shadow for button elements in carousel-caption
   }
@@ -218,7 +219,7 @@
 
 
 // Scale up controls for tablets and up
-.media-sm({
+@include media-sm {
   // Scale up the controls a smidge
   .carousel-control {
     .icon-prev,
@@ -247,4 +248,4 @@
   .carousel-indicators {
     bottom: 20px;
   }
-});
+}

less/_close.less → scss/_close.scss

@@ -5,16 +5,16 @@
 
 .close {
   float: right;
-  font-size: (@font-size-base * 1.5);
-  font-weight: @close-font-weight;
+  font-size: ($font-size-base * 1.5);
+  font-weight: $close-font-weight;
   line-height: 1;
-  color: @close-color;
-  text-shadow: @close-text-shadow;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
   opacity: .2;
 
   &:hover,
   &:focus {
-    color: @close-color;
+    color: $close-color;
     text-decoration: none;
     cursor: pointer;
     opacity: .5;
@@ -23,7 +23,7 @@
   // Additional properties for button version
   // iOS requires the button element instead of an anchor tag.
   // If you want the anchor version, it requires `href="#"`.
-  button& {
+  &button {
     padding: 0;
     cursor: pointer;
     background: transparent;

less/_code.less → scss/_code.scss

@@ -8,32 +8,32 @@ code,
 kbd,
 pre,
 samp {
-  font-family: @font-family-monospace;
+  font-family: $font-family-monospace;
 }
 
 // Inline code
 code {
   padding: .2rem .4rem;
   font-size: 90%;
-  color: @code-color;
-  background-color: @code-bg;
-  .border-radius(@border-radius-base);
+  color: $code-color;
+  background-color: $code-bg;
+  @include border-radius($border-radius-base);
 }
 
 // User input typically entered via keyboard
 kbd {
   padding: .2rem .4rem;
   font-size: 90%;
-  color: @kbd-color;
-  background-color: @kbd-bg;
-  .border-radius(@border-radius-sm);
-  .box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  @include border-radius($border-radius-sm);
+  @include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
 
   kbd {
     padding: 0;
     font-size: 100%;
     font-weight: bold;
-    .box-shadow(none);
+    @include box-shadow(none);
   }
 }
 
@@ -44,10 +44,10 @@ pre {
   margin-top: 0;
   margin-bottom: 1rem;
   font-size: 90%;
-  line-height: @line-height-base;
-  color: @pre-color;
-  background-color: @pre-bg;
-  .border-radius(@border-radius-base);
+  line-height: $line-height-base;
+  color: $pre-color;
+  background-color: $pre-bg;
+  @include border-radius($border-radius-base);
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -61,6 +61,6 @@ pre {
 
 // Enable scrollable blocks of code
 .pre-scrollable {
-  max-height: @pre-scrollable-max-height;
+  max-height: $pre-scrollable-max-height;
   overflow-y: scroll;
 }

less/_dropdown.less → scss/_dropdown.scss

@@ -16,9 +16,9 @@
     content: "";
     margin-left: .25rem;
     vertical-align: middle;
-    border-top:   @caret-width-base solid;
-    border-right: @caret-width-base solid transparent;
-    border-left:  @caret-width-base solid transparent;
+    border-top:   $caret-width-base solid;
+    border-right: $caret-width-base solid transparent;
+    border-left:  $caret-width-base solid transparent;
   }
 
   // Prevent the focus on the dropdown toggle when closing dropdowns
@@ -32,24 +32,24 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: @zindex-dropdown;
+  z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   float: left;
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
-  font-size: @font-size-base;
+  font-size: $font-size-base;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-  background-color: @dropdown-bg;
-  border: 1px solid @dropdown-border;
-  .border-radius(@border-radius-base);
-  .box-shadow(0 6px 12px rgba(0,0,0,.175));
+  background-color: $dropdown-bg;
+  border: 1px solid $dropdown-border;
+  @include border-radius($border-radius-base);
+  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
   background-clip: padding-box;
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    .nav-divider(@dropdown-divider-bg);
+    @include nav-divider($dropdown-divider-bg);
   }
 
   // Links within the dropdown menu
@@ -58,8 +58,8 @@
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
-    line-height: @line-height-base;
-    color: @dropdown-link-color;
+    line-height: $line-height-base;
+    color: $dropdown-link-color;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
   }
 }
@@ -69,8 +69,8 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    color: @dropdown-link-hover-color;
-    background-color: @dropdown-link-hover-bg;
+    color: $dropdown-link-hover-color;
+    background-color: $dropdown-link-hover-bg;
   }
 }
 
@@ -79,10 +79,10 @@
   &,
   &:hover,
   &:focus {
-    color: @dropdown-link-active-color;
+    color: $dropdown-link-active-color;
     text-decoration: none;
     outline: 0;
-    background-color: @dropdown-link-active-bg;
+    background-color: $dropdown-link-active-bg;
   }
 }
 
@@ -94,7 +94,7 @@
   &,
   &:hover,
   &:focus {
-    color: @dropdown-link-disabled-color;
+    color: $dropdown-link-disabled-color;
   }
 
   // Nuke hover/focus effects
@@ -103,8 +103,8 @@
     text-decoration: none;
     background-color: transparent;
     background-image: none; // Remove CSS gradient
-    .reset-filter();
-    cursor: @cursor-disabled;
+    @include reset-filter();
+    cursor: $cursor-disabled;
   }
 }
 
@@ -144,9 +144,9 @@
 .dropdown-header {
   display: block;
   padding: 3px 20px;
-  font-size: @font-size-sm;
-  line-height: @line-height-base;
-  color: @dropdown-header-color;
+  font-size: $font-size-sm;
+  line-height: $line-height-base;
+  color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
 
@@ -157,7 +157,7 @@
   right: 0;
   bottom: 0;
   top: 0;
-  z-index: (@zindex-dropdown - 10);
+  z-index: ($zindex-dropdown - 10);
 }
 
 // Right aligned dropdowns
@@ -176,7 +176,7 @@
   // Reverse the caret
   .caret {
     border-top: 0;
-    border-bottom: @caret-width-base solid;
+    border-bottom: $caret-width-base solid;
     content: "";
   }
   // Different positioning for bottom up menu
@@ -191,16 +191,18 @@
 // Component alignment
 //
 // Reiterate per navbar.less and the modified component alignment there.
-
-.media-sm({
-  .navbar-right {
-    .dropdown-menu {
-      .dropdown-menu-right();
-    }
-    // Necessary for overrides of the default right aligned menu.
-    // Will remove come v4 in all likelihood.
-    .dropdown-menu-left {
-      .dropdown-menu-left();
-    }
-  }
-});
+//
+// TODO: remove?
+
+// @include media-sm {
+//   .navbar-right {
+//     .dropdown-menu {
+//       .dropdown-menu-right();
+//     }
+//     // Necessary for overrides of the default right aligned menu.
+//     // Will remove come v4 in all likelihood.
+//     .dropdown-menu-left {
+//       .dropdown-menu-left();
+//     }
+//   }
+// }

less/_forms.less → scss/_forms.scss

@@ -21,12 +21,12 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @line-height-computed;
-  font-size: (@font-size-base * 1.5);
+  margin-bottom: $line-height-computed;
+  font-size: ($font-size-base * 1.5);
   line-height: inherit;
-  color: @legend-color;
+  color: $legend-color;
   border: 0;
-  border-bottom: 1px solid @legend-border-color;
+  border-bottom: 1px solid $legend-border-color;
 }
 
 label {
@@ -76,21 +76,23 @@ select[size] {
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  .tab-focus();
+  @include tab-focus();
 }
 
 // Adjust output element
 output {
   display: block;
-  padding-top: (@padding-base-vertical + 1);
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @input-color;
+  padding-top: ($padding-base-vertical + 1);
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $input-color;
 }
 
 
+//
 // Common form controls
 //
+
 // Shared size and type resets for form controls. Apply `.form-control` to any
 // of the following form controls:
 //
@@ -114,24 +116,24 @@ output {
 .form-control {
   display: block;
   width: 100%;
-  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: @padding-base-vertical @padding-base-horizontal;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @input-color;
-  background-color: @input-bg;
+  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $padding-base-vertical $padding-base-horizontal;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $input-color;
+  background-color: $input-bg;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid @input-border;
-  .border-radius(@input-border-radius);
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  border: 1px solid $input-border;
+  @include border-radius($input-border-radius);
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 
   // Customize the `:focus` state to imitate native WebKit styles.
-  .form-control-focus();
+  @include form-control-focus();
 
   // Placeholder
   &::placeholder {
-    color: @input-color-placeholder;
+    color: $input-color-placeholder;
   }
 
   // Disabled and read-only inputs
@@ -142,17 +144,17 @@ output {
   &[disabled],
   &[readonly],
   fieldset[disabled] & {
-    cursor: @cursor-disabled;
-    background-color: @input-bg-disabled;
+    cursor: $cursor-disabled;
+    background-color: $input-bg-disabled;
     opacity: 1; // iOS fix for unreadable disabled content
   }
+}
 
-  // Reset height for `textarea`s
-  textarea& {
-    height: auto;
-    padding-top: @padding-base-horizontal;
-    padding-bottom: @padding-base-horizontal;
-  }
+// Reset height for `textarea`s
+textarea.form-control {
+  height: auto;
+  padding-top: $padding-base-horizontal;
+  padding-bottom: $padding-base-horizontal;
 }
 
 
@@ -180,19 +182,19 @@ input[type="search"] {
   input[type="time"],
   input[type="datetime-local"],
   input[type="month"] {
-    line-height: @input-height-base;
+    line-height: $input-height-base;
   }
   input[type="date"].input-sm,
   input[type="time"].input-sm,
   input[type="datetime-local"].input-sm,
   input[type="month"].input-sm {
-    line-height: @input-height-sm;
+    line-height: $input-height-sm;
   }
   input[type="date"].input-lg,
   input[type="time"].input-lg,
   input[type="datetime-local"].input-lg,
   input[type="month"].input-lg {
-    line-height: @input-height-lg;
+    line-height: $input-height-lg;
   }
 }
 
@@ -219,7 +221,7 @@ input[type="search"] {
   margin-bottom: 10px;
 
   label {
-    min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
+    min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
     padding-left: 20px;
     margin-bottom: 0;
     font-weight: normal;
@@ -265,7 +267,7 @@ input[type="checkbox"] {
   &[disabled],
   &.disabled,
   fieldset[disabled] & {
-    cursor: @cursor-disabled;
+    cursor: $cursor-disabled;
   }
 }
 // These classes are used directly on <label>s
@@ -273,7 +275,7 @@ input[type="checkbox"] {
 .checkbox-inline {
   &.disabled,
   fieldset[disabled] & {
-    cursor: @cursor-disabled;
+    cursor: $cursor-disabled;
   }
 }
 // These classes are used on elements with <label> descendants
@@ -282,7 +284,7 @@ input[type="checkbox"] {
   &.disabled,
   fieldset[disabled] & {
     label {
-      cursor: @cursor-disabled;
+      cursor: $cursor-disabled;
     }
   }
 }
@@ -295,8 +297,8 @@ input[type="checkbox"] {
 
 .form-control-static {
   // Size it appropriately next to real form controls
-  padding-top: (@padding-base-vertical + 1);
-  padding-bottom: (@padding-base-vertical + 1);
+  padding-top: ($padding-base-vertical + 1);
+  padding-bottom: ($padding-base-vertical + 1);
   // Remove default margin from `p`
   margin-bottom: 0;
 
@@ -316,22 +318,16 @@ input[type="checkbox"] {
 // The `.form-group-* form-control` variations are sadly duplicated to avoid the
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
-.input-sm {
-  .input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
-}
+@include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
+
 .form-group-sm {
-  .form-control {
-    .input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
-  }
+  @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
 }
 
-.input-lg {
-  .input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
-}
+@include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
+
 .form-group-lg {
-  .form-control {
-    .input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
-  }
+  @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
 }
 
 
@@ -345,7 +341,7 @@ input[type="checkbox"] {
 
   // Ensure icons don't overlap text
   .form-control {
-    padding-right: (@input-height-base * 1.25);
+    padding-right: ($input-height-base * 1.25);
   }
 }
 // Feedback icon
@@ -355,39 +351,39 @@ input[type="checkbox"] {
   right: 0;
   z-index: 2; // Ensure icon is above input groups
   display: block;
-  width: @input-height-base;
-  height: @input-height-base;
-  line-height: @input-height-base;
+  width: $input-height-base;
+  height: $input-height-base;
+  line-height: $input-height-base;
   text-align: center;
   pointer-events: none;
 }
 .input-lg + .form-control-feedback {
-  width: @input-height-lg;
-  height: @input-height-lg;
-  line-height: @input-height-lg;
+  width: $input-height-lg;
+  height: $input-height-lg;
+  line-height: $input-height-lg;
 }
 .input-sm + .form-control-feedback {
-  width: @input-height-sm;
-  height: @input-height-sm;
-  line-height: @input-height-sm;
+  width: $input-height-sm;
+  height: $input-height-sm;
+  line-height: $input-height-sm;
 }
 
-// Feedback states
+// Form validation states
 .has-success {
-  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
 }
 .has-warning {
-  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
 }
 .has-error {
-  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
 }
 
 // Reposition feedback icon if input has visible label above
 .has-feedback label {
 
   & ~ .form-control-feedback {
-     top: (@line-height-computed + 5); // Height of the `label` and its margin
+     top: ($line-height-computed + 5); // Height of the `label` and its margin
   }
   &.sr-only ~ .form-control-feedback {
      top: 0;
@@ -404,7 +400,7 @@ input[type="checkbox"] {
   display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 10px;
-  color: lighten(@text-color, 25%); // lighten the text some for contrast
+  color: lighten($text-color, 25%); // lighten the text some for contrast
 }
 
 
@@ -422,7 +418,7 @@ input[type="checkbox"] {
 .form-inline {
 
   // Kick in the inline
-  .media-sm({
+  @include media-sm {
     // Inline-block all the things for "inline"
     .form-group {
       display: inline-block;
@@ -487,7 +483,7 @@ input[type="checkbox"] {
     .has-feedback .form-control-feedback {
       top: 0;
     }
-  });
+  }
 }
 
 
@@ -507,36 +503,36 @@ input[type="checkbox"] {
   .checkbox-inline {
     margin-top: 0;
     margin-bottom: 0;
-    padding-top: (@padding-base-vertical + .1); // Default padding plus a border
+    padding-top: ($padding-base-vertical + .1); // Default padding plus a border
   }
   // Account for padding we're adding to ensure the alignment and of help text
   // and other content below items
   .radio,
   .checkbox {
-    min-height: (@line-height-computed + (@padding-base-vertical + .1));
+    min-height: ($line-height-computed + ($padding-base-vertical + .1));
   }
 
   // Make form groups behave like rows
   .form-group {
-    .make-row();
+    @include make-row();
   }
 
   // Reset spacing and right align labels, but scope to media queries so that
   // labels on narrow viewports stack the same as a default form example.
-  .media-sm({
+  @include media-sm {
     .control-label {
       text-align: right;
       margin-bottom: 0;
-      padding-top: (@padding-base-vertical + .1); // Default padding plus a border
+      padding-top: ($padding-base-vertical + .1); // Default padding plus a border
     }
-  });
+  }
 
   // Validation states
   //
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: (@grid-gutter-width / 2);
+    right: ($grid-gutter-width / 2);
   }
 
   // Form group sizes
@@ -544,16 +540,16 @@ input[type="checkbox"] {
   // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
   // inputs and labels within a `.form-group`.
   .form-group-lg {
-    @media (min-width: @screen-sm-min) {
+    @media (min-width: $screen-sm-min) {
       .control-label {
-        padding-top: @padding-lg-vertical;
+        padding-top: $padding-lg-vertical;
       }
     }
   }
   .form-group-sm {
-    @media (min-width: @screen-sm-min) {
+    @media (min-width: $screen-sm-min) {
       .control-label {
-        padding-top: (@padding-sm-vertical + .1);
+        padding-top: ($padding-sm-vertical + .1);
       }
     }
   }

less/_grid.less → scss/_grid.scss

@@ -8,16 +8,16 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 .container {
-  .make-container();
+  @include make-container();
 
-  @media (min-width: @screen-sm-min) {
-    max-width: @container-sm;
+  @media (min-width: $screen-sm-min) {
+    max-width: $container-sm;
   }
-  @media (min-width: @screen-md-min) {
-    max-width: @container-md;
+  @media (min-width: $screen-md-min) {
+    max-width: $container-md;
   }
-  @media (min-width: @screen-lg-min) {
-    max-width: @container-lg;
+  @media (min-width: $screen-lg-min) {
+    max-width: $container-lg;
   }
 }
 
@@ -28,7 +28,7 @@
 // width for fluid, full width layouts.
 
 .container-fluid {
-  .make-container();
+  @include make-container();
 }
 
 
@@ -37,7 +37,7 @@
 // Rows contain and clear the floats of your columns.
 
 .row {
-  .make-row();
+  @include make-row();
 }
 
 
@@ -45,7 +45,7 @@
 //
 // Common styles for small and large grid columns
 
-.make-grid-columns();
+@include make-grid-columns();
 
 
 // Extra small grid
@@ -53,7 +53,7 @@
 // Columns, offsets, pushes, and pulls for extra small devices like
 // smartphones.
 
-.make-grid(xs);
+@include make-grid(xs);
 
 
 // Small grid
@@ -61,24 +61,24 @@
 // Columns, offsets, pushes, and pulls for the small device range, from phones
 // to tablets.
 
-.media-sm({
-  .make-grid(sm);
-});
+@include media-sm {
+  @include make-grid(sm);
+}
 
 
 // Medium grid
 //
 // Columns, offsets, pushes, and pulls for the desktop device range.
 
-.media-md({
-  .make-grid(md);
-});
+@include media-md {
+  @include make-grid(md);
+}
 
 
 // Large grid
 //
 // Columns, offsets, pushes, and pulls for the large desktop device range.
 
-.media-lg({
-  .make-grid(lg);
-});
+@include media-lg {
+  @include make-grid(lg);
+}