Less is more

assets/manifest.json

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

assets/styles/common/_variables.less

@@ -0,0 +1,9 @@
+// Glyphicons font path
+@icon-font-path:        "../fonts/";
+
+// Grid settings
+@main-sm-columns:       12;
+@sidebar-sm-columns:    4;
+
+// Colors
+@brand-primary:         #27ae60;

assets/styles/components/_comments.scss → assets/styles/components/_comments.less

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

assets/styles/components/_grid.less

@@ -0,0 +1,10 @@
+// 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/_wp-classes.scss → assets/styles/components/_wp-classes.less

@@ -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;
+  &:extend(.thumbnail all);
 }
 .wp-caption-text {
-  padding: $thumbnail-caption-padding;
+  &:extend(.thumbnail .caption all);
 }
 
 // Text meant only for screen readers
 .screen-reader-text {
-  @extend .sr-only;
-  @extend .sr-only-focusable;
+  &:extend(.sr-only all);
+  &:extend(.sr-only-focusable all);
 }

assets/styles/main.scss → assets/styles/main.less

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

bower.json

@@ -8,32 +8,32 @@
   "private": true,
   "dependencies": {
     "modernizr": "2.8.2",
-    "bootstrap-sass-official": "3.3.5"
+    "bootstrap": "3.3.5"
   },
   "overrides": {
     "modernizr": {
       "main": "./modernizr.js"
     },
-    "bootstrap-sass-official": {
+    "bootstrap": {
       "main": [
-        "./assets/stylesheets/_bootstrap.scss",
-        "./assets/javascripts/bootstrap/transition.js",
-        "./assets/javascripts/bootstrap/alert.js",
-        "./assets/javascripts/bootstrap/button.js",
-        "./assets/javascripts/bootstrap/carousel.js",
-        "./assets/javascripts/bootstrap/collapse.js",
-        "./assets/javascripts/bootstrap/dropdown.js",
-        "./assets/javascripts/bootstrap/modal.js",
-        "./assets/javascripts/bootstrap/tooltip.js",
-        "./assets/javascripts/bootstrap/popover.js",
-        "./assets/javascripts/bootstrap/scrollspy.js",
-        "./assets/javascripts/bootstrap/tab.js",
-        "./assets/javascripts/bootstrap/affix.js",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
+        "./less/bootstrap.less",
+        "./js/transition.js",
+        "./js/alert.js",
+        "./js/button.js",
+        "./js/carousel.js",
+        "./js/collapse.js",
+        "./js/dropdown.js",
+        "./js/modal.js",
+        "./js/tooltip.js",
+        "./js/popover.js",
+        "./js/scrollspy.js",
+        "./js/tab.js",
+        "./js/affix.js",
+        "./fonts/glyphicons-halflings-regular.eot",
+        "./fonts/glyphicons-halflings-regular.svg",
+        "./fonts/glyphicons-halflings-regular.ttf",
+        "./fonts/glyphicons-halflings-regular.woff",
+        "./fonts/glyphicons-halflings-regular.woff2"
       ]
     }
   }