Fixing sass issues iwth :not() and @extend using together bug

Author: darklow

gulpfile.js

@@ -6,18 +6,17 @@ var browserSync = require('browser-sync');
 var reload = browserSync.reload;
 var autoprefixer = require('gulp-autoprefixer');
 var plumber = require('gulp-plumber');
-var watch = require('gulp-watch');
 
 var config = {
-    djangoHost: '0.0.0.0',
+    djangoHost: 'localhost',
     djangoPort: 8000,
     jsPort: 8001,
     watchSassFiles: 'suit/sass/**/*.scss',
     cssOutputDir: 'suit/static/suit/css/',
     watchHtmlFiles: [
         'suit/templates/**/*.html',
         'demo/demo/templates/**/*.html'
-    ],
+    ]
 };
 
 gulp.task('styles', function () {

package.json

@@ -4,11 +4,10 @@
   "description": "Django Suit development tools",
   "author": "Kaspars Sprogis",
   "devDependencies": {
-    "browser-sync": "^2.11.1",
-    "gulp": "^3.9.0",
+    "browser-sync": "^2.17.1",
+    "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-plumber": "^1.0.1",
-    "gulp-sass": "^2.1.1",
-    "gulp-watch": "^4.3.5"
+    "gulp-sass": "^2.3.2"
   }
 }

suit/sass/_mixins.scss

@@ -6,10 +6,11 @@
 @mixin suit-box-shadow($darken: 5%) {
   box-shadow: 0 1px 0 0 darken($body-bg, $darken);
 }
+@mixin text-semibold() { font-weight: 500; }
 .text-lighter { font-weight: 200; }
 .text-light { font-weight: 300; }
 .text-normal { font-weight: 400; }
-.text-semibold { font-weight: 500; }
+.text-semibold { @include text-semibold(); }
 .text-light-bold {
   @extend .text-light;
   strong {

suit/sass/components/_buttons.scss

@@ -7,7 +7,7 @@
   @extend .btn;
   @extend .btn-#{$state};
   @if $size {
-    @extend .btn-#{$size};
+    @extend .btn-#{$size} !optional;
   }
   @if $round {
     border-radius: 70px;

suit/sass/components/_submit_row.scss

@@ -11,7 +11,7 @@
     margin-bottom: .5rem;
   }
   input[type='submit'], input[type='button'], button {
-    &:not(.btn) {
+    &:not([class*=".btn-"]) {
       @extend .btn;
       @extend .btn-lg;
       @extend .btn-secondary;
@@ -88,7 +88,7 @@
           }
         }
         &.heading {
-          @extend .text-semibold;
+          @include text-semibold();
           font-size: $font-size-lg;
           padding: 0 $grid-gutter-width/3 $grid-gutter-width/4;
           &.heading-inverse {

suit/sass/layout/_content.scss

@@ -39,8 +39,8 @@ body.change-form {
         margin-left: .5rem;
       }
       > a {
-        @extend .btn-round;
-        &:not(.btn) {
+        &:not([class*="btn-"]) {
+          @extend .btn-round;
           @include btn-mixin(info, none, sm, round=true);
           &.addlink {
             @include btn-mixin(success, $icon-plus-circle, sm, round=true);