convert to scss

docs/assets/scss/docs.scss

@@ -6,19 +6,19 @@
  */
 
 // Import Bootstrap variables and mixins
-@import "../../../less/_variables.less";
-@import "../../../less/_mixins.less";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
 
 // Import the syntax highlighting
-@import "syntax.less";
+@import "syntax";
 
 // Local docs variables
-@bs-purple:       #563d7c;
-@bs-purple-light: #cdbfe3;
-@bs-yellow:       #ffe484;
-@bs-danger:       #d9534f;
-@bs-warning:      #f0ad4e;
-@bs-info:         #5bc0de;
+$bs-purple:       #563d7c;
+$bs-purple-light: #cdbfe3;
+$bs-yellow:       #ffe484;
+$bs-danger:       #d9534f;
+$bs-warning:      #f0ad4e;
+$bs-info:         #5bc0de;
 
 
 // Scaffolding
@@ -35,28 +35,28 @@ body {
 //
 
 .btn-outline {
-  color: @bs-purple;
+  color: $bs-purple;
   background-color: transparent;
-  border-color: @bs-purple;
+  border-color: $bs-purple;
 
   &:hover,
   &:focus,
   &:active {
     color: #fff;
-    background-color:@bs-purple;
-    border-color: @bs-purple;
+    background-color:$bs-purple;
+    border-color: $bs-purple;
   }
 }
 
 .btn-outline-inverse {
   color: #fff;
   background-color: transparent;
-  border-color: @bs-purple-light;
+  border-color: $bs-purple-light;
 
   &:hover,
   &:focus,
   &:active {
-    color: @bs-purple;
+    color: $bs-purple;
     text-shadow: none;
     background-color: #fff;
     border-color: #fff;
@@ -78,16 +78,16 @@ body {
   color: #fff;
   text-align: center;
   cursor: default;
-  background-color: @bs-purple;
+  background-color: $bs-purple;
   border-radius: 15%;
 
   &.inverse {
-    color: @bs-purple;
+    color: $bs-purple;
     background-color: #fff;
   }
   &.outline {
     background-color: transparent;
-    border: 1px solid @bs-purple-light;
+    border: 1px solid $bs-purple-light;
   }
 }
 
@@ -217,7 +217,7 @@ body {
   text-align: center;
   text-shadow: 0 1px 0 rgba(0,0,0,.1);
   background-color: #6f5499;
-  #gradient > .vertical(@bs-purple, #6f5499);
+  @include gradient-vertical($bs-purple, #6f5499);
 }
 
 .bs-docs-masthead .bs-docs-booticon {
@@ -279,7 +279,7 @@ body {
   padding-bottom: 2rem;
   margin-bottom: 2rem;
   font-size: 1.25rem;
-  background-color: @bs-purple;
+  background-color: $bs-purple;
 }
 .bs-docs-header h1 {
   margin-top: 0;
@@ -330,7 +330,7 @@ body {
   overflow: hidden; /* clearfix */
   font-size: .8rem !important;
   line-height: 1rem !important;
-  color: @bs-purple-light !important;
+  color: $bs-purple-light !important;
   text-align: left;
   background: transparent !important;
   border: solid #866ab3 !important;
@@ -371,7 +371,7 @@ body {
 // }
 // .bs-docs-header .carbonad-text a,
 // .bs-docs-header .carbonad-tag a {
-//   color: @bs-purple !important;
+//   color: $bs-purple !important;
 // }
 
 @media (min-width: 480px) {
@@ -448,7 +448,7 @@ body {
   color: #333;
 }
 .bs-docs-featurette-img:hover {
-  color: @brand-primary;
+  color: $brand-primary;
   text-decoration: none;
 }
 .bs-docs-featurette-img img {
@@ -597,7 +597,7 @@ body {
     width: 240px;
     overflow-x: hidden;
     overflow-y: auto;
-    #gradient > .vertical(#29262f, #322f38);
+    @include gradient-vertical(#29262f, #322f38);
   }
   .bs-docs-sidebar .navbar-brand {
     margin-bottom: 15px;
@@ -634,12 +634,12 @@ body {
 }
 .bs-docs-toc-link:hover,
 .bs-docs-toc-link:focus {
-  color: @bs-yellow;
+  color: $bs-yellow;
   text-decoration: none;
 }
 .active > .bs-docs-toc-link {
   font-weight: 500;
-  color: @bs-yellow;
+  color: $bs-yellow;
 }
 .active > .bs-docs-sidenav {
   display: block;
@@ -665,7 +665,7 @@ body {
 }
 .bs-docs-sidebar .nav > li > a:hover,
 .bs-docs-sidebar .nav > li > a:focus {
-  color: @bs-yellow;
+  color: $bs-yellow;
   text-decoration: none;
   background-color: transparent;
 }
@@ -673,7 +673,7 @@ body {
 .bs-docs-sidebar .nav > .active:hover > a,
 .bs-docs-sidebar .nav > .active:focus > a {
   font-weight: 500;
-  color: @bs-yellow;
+  color: $bs-yellow;
   background-color: transparent;
 }
 
@@ -763,14 +763,14 @@ body {
 }
 
 // Variations
-.bs-callout-variant(@color) {
-  border-left-color: @color;
+@mixin bs-callout-variant($color) {
+  border-left-color: $color;
 
-  h4 { color: @color; }
+  h4 { color: $color; }
 }
-.bs-callout-danger  { .bs-callout-variant(@bs-danger); }
-.bs-callout-warning { .bs-callout-variant(@bs-warning); }
-.bs-callout-info    { .bs-callout-variant(@bs-info); }
+.bs-callout-danger  { @include bs-callout-variant($bs-danger); }
+.bs-callout-warning { @include bs-callout-variant($bs-warning); }
+.bs-callout-info    { @include bs-callout-variant($bs-info); }
 
 
 //
@@ -799,10 +799,10 @@ body {
 // Docs colors
 .color-swatches {
   .bs-purple {
-    background-color: @bs-purple;
+    background-color: $bs-purple;
   }
   .bs-purple-light {
-    background-color: @bs-purple-light;
+    background-color: $bs-purple-light;
   }
   .bs-purple-lighter {
     background-color: #e5e1ea;
@@ -880,7 +880,7 @@ body {
   margin-bottom: -1rem;
   border: solid #f7f7f9;
   border-width: .2rem 0 0;
-  .clearfix();
+  @include clearfix();
 
   @media (min-width: 480px) {
     border-width: .2rem;
@@ -1123,7 +1123,7 @@ body {
 }
 .highlight pre code {
   font-size: inherit;
-  color: @gray-dark; // Effectively the base text color
+  color: $gray-dark; // Effectively the base text color
 }
 
 
@@ -1428,8 +1428,8 @@ body {
 
 // Pseudo :focus state for showing how it looks in the docs
 #focusedInput {
-  border-color: @input-border-focus;
+  border-color: $input-border-focus;
   outline: 0;
   outline: thin dotted \9; // IE9
-  box-shadow: 0 0 .5rem @input-box-shadow-focus;
+  box-shadow: 0 0 .5rem $input-box-shadow-focus;
 }