working on converting _mixins.scss by hand.

.gitignore

@@ -12,3 +12,4 @@ Thumbs.db
 .build*
 /_SpecRunner.html
 Gemfile.lock
+tmp

Gruntfile.js

@@ -11,13 +11,27 @@ module.exports = function(grunt) {
         files: [{
           expand: true,
           cwd: 'less',
-          src: ['*.less'],
+          src: ['*.less', '!_mixins.less'],
           ext: '.scss',
           dest: 'sass'
         }]
       }
     },
 
+    // Test compile sass
+    sass: {
+      compile: {
+        files: [{
+          expand: true,
+          cwd: 'sass',
+          //src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'],
+          src: ['material.scss'],
+          dest: 'tmp/sass/compiled',
+          ext: '.css'
+        }]
+      }
+    },
+
     // Compile less to .css
     // Compile less to .min.css
     // Create source maps of both
@@ -280,7 +294,8 @@ module.exports = function(grunt) {
   ]);
 
   grunt.registerTask("material:sass", [
-    "lessToSass:convert"
+    "lessToSass:convert",
+    "sass:compile"
   ]);
 
   grunt.registerTask("material:less", [

less/material.less

@@ -1,5 +1,5 @@
-@import "_variables.less";
 @import "_colors.less";
+@import "_variables.less";
 @import "_mixins.less";
 @import "_icons-material-design.less";
 

sass/_mixins.scss

@@ -1,12 +1,12 @@
 // usage: @include variations(unquote(" .check"), color, transparent);
 @mixin variations($extra, $property, $default){
-  .generic-variations($extra, $default, {
+  @include generic-variations($extra, $default) {
-    #{$property}: $material-color !default;
+    #{$property}: $material-color;
-  });
+  };
 }
 
 @mixin background-variations($extra, $default){
-  .generic-variations($extra, $default, {
+  @include generic-variations($extra, $default) {
     background-color: $material-color;
     & when ($material-color = $btn-default) {
       color: $lightbg-text;
@@ -14,13 +14,13 @@
     & when not ($material-color = $btn-default) {
       color: $material-text-color;
     }
-  });
+  };
 }
 
 @mixin text-variations($extra, $default){
-  .generic-variations($extra, $default, {
+  @include generic-variations($extra, $default) {
     color: $material-color;
-  });
+  };
 }
 
 //
@@ -34,7 +34,7 @@
 //
 
 
-@mixin generic-variations($extra, $default, $func){
+@mixin generic-variations($extra, $default){
 
   $contrast-factor: 40% !default;
 
@@ -44,63 +44,63 @@
     $material-color-full-name: $material-color-name !default;
     $material-color: $default !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
   &-black#{$extra} {
     $material-color-name: "black" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $black !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
   &-white#{$extra} {
     $material-color-name: "white" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $white !default;
     $material-text-color: $lightbg-text !default;
-    $func();
+    @content
   }
   &-inverse#{$extra} {
     $material-color-name: "inverse" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $inverse !default;
     $material-text-color: contrast($inverse, $lightbg-text, $darkbg-text, $contrast-factor) !default;
-    $func();
+    @content
   }
   &-primary#{$extra} {
     $material-color-name: "primary" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $primary !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
   &-success#{$extra} {
     $material-color-name: "success" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $success !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
   &-info#{$extra} {
     $material-color-name: "info" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $info !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
   &-warning#{$extra} {
     $material-color-name: "warning" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $warning !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
   &-danger#{$extra} {
     $material-color-name: "danger" !default;
     $material-color-full-name: $material-color-name !default;
     $material-color: $danger !default;
     $material-text-color: $darkbg-text !default;
-    $func();
+    @content
   }
 
   // given a color build multiples dephs
@@ -111,9 +111,9 @@
 
       &-material-#{$material-color-name}#{$material-color-number}#{$extra} {
         $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
-        $material-color: $$material-color-full-name !default;
+        $material-color: $material-color-full-name !default;
         $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
-        $func();
+        @content
       }
 
     }

sass/material.scss

@@ -1,5 +1,5 @@
-@import '_variables';
 @import '_colors';
+@import '_variables';
 @import '_mixins';
 @import '_icons-material-design';