Use Bootstrap Sass by default

assets/manifest.json

@@ -8,13 +8,13 @@
     },
     "main.css": {
       "files": [
-        "styles/main.less"
+        "styles/main.scss"
       ],
       "main": true
     },
     "editor-style.css": {
       "files": [
-        "styles/editor-style.less"
+        "styles/editor-style.scss"
       ]
     },
     "jquery.js": {

assets/styles/common/_global.scss

@@ -0,0 +1 @@
+

assets/styles/common/_variables.less

@@ -1,6 +0,0 @@
-// Grid settings
-@main-sm-columns:       @grid-columns;
-@sidebar-sm-columns:    4;
-
-// Colors
-@brand-primary:         #27ae60;

assets/styles/common/_variables.scss

@@ -0,0 +1,6 @@
+// Grid settings
+$main-sm-columns:       12;
+$sidebar-sm-columns:    4;
+
+// Colors
+$brand-primary:         #27ae60;

assets/styles/components/_comments.scss

@@ -1,19 +1,19 @@
 .comment-list {
-  &:extend(.list-unstyled all);
+  @include list-unstyled;
 }
 .comment-list ol {
   list-style: none;
 }
 .comment-form p {
-  &:extend(.form-group all);
+  @extend .form-group;
 }
 .comment-form input[type="text"],
 .comment-form input[type="email"],
 .comment-form input[type="url"],
 .comment-form textarea {
-  &:extend(.form-control all);
+  @extend .form-control;
 }
 .comment-form input[type="submit"] {
-  &:extend(.btn all);
-  &:extend(.btn-primary all);
+  @extend .btn;
+  @extend .btn-primary;
 }

assets/styles/components/_grid.less

@@ -1,10 +0,0 @@
-// Grid system
-.main {
-  .make-sm-column(@main-sm-columns);
-  .sidebar-primary & {
-    .make-sm-column(@main-sm-columns - @sidebar-sm-columns);
-  }
-}
-.sidebar {
-  .make-sm-column(@sidebar-sm-columns);
-}

assets/styles/components/_grid.scss

@@ -0,0 +1,10 @@
+// Grid system
+.main {
+  @include make-sm-column($main-sm-columns);
+  .sidebar-primary & {
+    @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
+  }
+}
+.sidebar {
+  @include make-sm-column($sidebar-sm-columns);
+}

assets/styles/components/_wp-classes.scss

@@ -9,34 +9,34 @@
 }
 .aligncenter {
   display: block;
-  margin: (@line-height-computed / 2) auto;
+  margin: ($line-height-computed / 2) auto;
 }
 .alignleft,
 .alignright {
-  margin-bottom: (@line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
 }
-@media (min-width: @screen-sm-min) {
+@media (min-width: $screen-sm-min) {
   // Only float if not on an extra small device
   .alignleft {
     float: left;
-    margin-right: (@line-height-computed / 2);
+    margin-right: ($line-height-computed / 2);
   }
   .alignright {
     float: right;
-    margin-left: (@line-height-computed / 2);
+    margin-left: ($line-height-computed / 2);
   }
 }
 
 // Captions
 .wp-caption {
-  &:extend(.thumbnail all);
+  @extend .thumbnail;
 }
 .wp-caption-text {
-  &:extend(.thumbnail .caption all);
+  padding: $thumbnail-caption-padding;
 }
 
 // Text meant only for screen readers
 .screen-reader-text {
-  &:extend(.sr-only all);
-  &:extend(.sr-only-focusable all);
+  @extend .sr-only;
+  @extend .sr-only-focusable;
 }

assets/styles/main.scss

@@ -1,9 +1,10 @@
+@import "common/_variables";
+
 // Automatically injected Bower dependencies via wiredep (never manually edit this block)
-// bower:less
-@import "../../bower_components/bootstrap/less/bootstrap.less";
+// bower:scss
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
 // endbower
 
-@import "common/_variables";
 @import "common/_global";
 @import "components/_buttons";
 @import "components/_comments";

assets/styles/main.scss.example

@@ -1,14 +0,0 @@
-// How to get started using Sass instead of Less:
-//
-// 1  Remove Bootstrap for Less: `bower uninstall bootstrap --save`
-// 2. Install Bootstrap for Sass: `bower install bootstrap-sass-official --save`
-// 3. Rename this file to `main.scss` and remove `main.less`
-// 4. Rename `editor-style.less` to `editor-style.scss`
-// 5. Update the `assets/manifest.json` styles dependencies from `.less` to `.scss`
-// 6. Change variables from Less to Sass (https://discourse.roots.io/t/regarding-the-grid-help-translating-less-to-sass/3253)
-//
-// Feel free to remove this file if you're using Less
-
-// bower:scss
-@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
-// endbower