#30 support for SCSS operators

Gruntfile.js

@@ -62,7 +62,7 @@ module.exports = function (grunt) {
                     '<%= config.app %>/sass/{,*/}*.scss',
                     '<%= config.src %>/sass/{,*/}*.scss'
                 ],
-                tasks: ['sass']
+                tasks: ['sass:bellmaker']
             },
             styles: {
                 files: ['<%= config.app %>/styles/{,*/}*.css'],
@@ -180,7 +180,7 @@ module.exports = function (grunt) {
                 options: {
                 },
                 files: {
-                    '<%= config.tmp %>/styles/main.css': '<%= config.app %>/less/imports.less'
+                    '<%= config.tmp %>/styles/main.less.css': '<%= config.app %>/less/imports.less'
                 }
             },
             minifiedLess: {
@@ -209,6 +209,11 @@ module.exports = function (grunt) {
             }
         },
         sass: {
+            bellmaker: {
+                files: {
+                    '<%= config.tmp %>/styles/main.sass.css': '<%= config.src %>/sass/bellmaker.scss'
+                }
+            },
             minifiedSass: {
                 options: {
                     style: 'compressed',

README.md

@@ -4,6 +4,7 @@ Bellmaker
 [![Bower version](https://badge.fury.io/bo/bellmaker.svg)](http://badge.fury.io/bo/bellmaker)
 [![Build Status](https://secure.travis-ci.org/herereadthis/bellmaker.svg?branch=master)](http://travis-ci.org/herereadthis/bellmaker)
 [![devDependency Status](https://david-dm.org/herereadthis/bellmaker/dev-status.svg)](https://david-dm.org/herereadthis/bellmaker#info=devDependencies)
+[![Code Climate](https://codeclimate.com/github/herereadthis/bellmaker/badges/gpa.svg)](https://codeclimate.com/github/herereadthis/bellmaker)
 
 * Project page at ***[herereadthis.com/code/bellmaker/](http://herereadthis.com/code/bellmaker/)***
 * Demo page at ***[bellmaker.herereadthis.com](http://bellmaker.herereadthis.com)***
@@ -363,39 +364,69 @@ Use these mixins especially for moving columns around. Remember that offsets and
 
 
 ```LESS
-// Offset mixin:
+// LESS: Offset mixin:
 .bellmaker_offset(@attribute,@offset) {};
-// Factor mixin:
+// LESS Factor mixin:
 .bellmaker_factor(@attribute,@factor) {};
 ```
 
+```SCSS
+// SASS: Offset mixin:
+@include bellmaker_offset($attribute,$offset) {};
+// SASS Factor mixin:
+@include bellmaker_factor($attribute,$factor) {};
+```
+
 #### Example: offset left padding
 
 ```LESS
-// #container will now always be 10rem width, with enough padding
-// on the left side to keep it flush right
-#container {
-    width: 10rem;
-    .bellmaker_offset(padding-left, 10);
+// As LESS: section will now always be 30rem width less than parent
+// container, so that a 30rem sidebar can floated right
+section {
+    float: left;
+    .bellmaker_offset(width, -30);
+}
+aside {
+    float: right;
+    width: 30rem;
 }
 ```
 
+```SCSS
+// As SASS
+section {
+    float: left;
+    @include bellmaker_offset(width, -30);
+}
+aside {
+    float: right;
+    width: 30rem;
+}
+```
+
+
+
+
 ```CSS
 /* output */
-#container {
-    width: 10rem;
+section {
+    float: left;
 }
 @media only screen and (min-width: 768px) {
-    #container {padding-left: 648px;}
+    section {width: 448px;}
 }
 @media only screen and (min-width: 1024px) {
-    #container {padding-left: 860px;}
+    section {width: 660px;}
 }
 @media only screen and (min-width: 1280px) {
-    #container {padding-left: 1052px;}
+    section {width: 852px;}
 }
 @media only screen and (min-width: 1440px) {
-    #container {padding-left: 1244px;}
+    section {width: 1044px;}
+}
+aside {
+    float: right;
+    width: 30rem;
 }
 ```
 

app/index.html

@@ -22,7 +22,7 @@
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/main.css -->
-    <link rel="stylesheet" href="styles/main.css">
+    <link rel="stylesheet" href="styles/main.less.css">
     <!-- endbuild -->
 </head>
 

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bellmaker",
-    "version": "0.4.4",
+    "version": "0.4.5",
     "authors": [
         {
             "name": "Jimmy Ha",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bellmaker",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints",
   "repository": {
     "type": "git",

src/less/operators.less

@@ -1,3 +1,12 @@
+// Operators
+//
+// sample usage
+// .foo {
+//     .bellmaker_offset(width,-10rem);
+//     .bellmaker_factor(padding-left,0.5);
+// }
+
+
 .bellmaker_offset(width, @offset) {
     @media @da_small {  width: @pw_small + @offset;}
     @media @da_medium { width: @pw_medium + @offset;}

src/sass/_operators.scss

@@ -0,0 +1,21 @@
+// Operators
+//
+// sample usage
+// .foo {
+//     @include bellmaker_offset(width,-10rem);
+//     @include bellmaker_factor(padding-left,0.5);
+// }
+
+@mixin bellmaker_offset($attribute, $offset) {
+    @media #{$da_small} {   #{$attribute}: $pw_small + $offset;}
+    @media #{$da_medium} {  #{$attribute}: $pw_medium + $offset;}
+    @media #{$da_large} {   #{$attribute}: $pw_large + $offset;}
+    @media #{$da_x_large} { #{$attribute}: $pw_x_large + $offset;}
+}
+@mixin bellmaker_factor($attribute, $factor) {
+    @media #{$da_small} {   #{$attribute}: $pw_small * $factor;}
+    @media #{$da_medium} {  #{$attribute}: $pw_medium * $factor;}
+    @media #{$da_large} {   #{$attribute}: $pw_large * $factor;}
+    @media #{$da_x_large} { #{$attribute}: $pw_x_large * $factor;}
+}
+

src/sass/bellmaker.scss

@@ -2,3 +2,5 @@
 
 @import "page_layout";
 
+@import "operators";
+