From 410fd9614680d48ce33d8ca3f5b229eb1ff9600a Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Mon, 10 Feb 2014 15:47:15 +0100
Subject: [PATCH] Remove comments and add specs

- Closes #140
---
 app/assets/stylesheets/grid/_media.scss |  9 ++-------
 spec/neat/media_spec.rb                 | 10 ++++++++++
 test/media.scss                         |  8 ++++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/grid/_media.scss b/app/assets/stylesheets/grid/_media.scss
index d8e98401..fdc6c3f6 100644
--- a/app/assets/stylesheets/grid/_media.scss
+++ b/app/assets/stylesheets/grid/_media.scss
@@ -1,6 +1,4 @@
 @mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
-
-  // if no arguments, give warning
   @if length($query) == 1 {
     @media screen and ($default-feature: nth($query, 1)) {
       $default-grid-columns: $grid-columns;
@@ -9,16 +7,13 @@
       $grid-columns: $default-grid-columns;
     }
   }
+
   @else {
     $loopTo: length($query);
     $mediaQuery: 'screen and ';
     $default-grid-columns: $grid-columns;
     $grid-columns: $total-columns;
 
-    // if there is an odd number of parameters,
-    // the last one is the number of columns
-    // grab the value and assign it, then
-    // decrement the counter
     @if length($query) % 2 != 0 {
       $grid-columns: nth($query, $loopTo);
       $loopTo: $loopTo - 1;
@@ -27,7 +22,7 @@
     $i: 1;
     @while $i <= $loopTo {
       $mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
-      
+
       @if ($i + 1) != $loopTo {
         $mediaQuery: $mediaQuery + 'and ';
       }
diff --git a/spec/neat/media_spec.rb b/spec/neat/media_spec.rb
index 2ea354f3..62f74bbd 100644
--- a/spec/neat/media_spec.rb
+++ b/spec/neat/media_spec.rb
@@ -42,4 +42,14 @@
       expect('.change-media-context-shorthand').to have_rule('width: 100%')
     end
   end
+
+  context "with composite argument (max-width 768px min-width 110px orientation portait 6)" do
+    it "outputs @media screen and (max-width: 768px) and (min-width: 110px) and (orientation: portait)" do
+      expect('.composite-media-query').to be_contained_in('screen and (max-width: 768px) and (min-width: 110px) and (orientation: portait)')
+    end
+
+    it "uses a 6-column grid" do
+      expect('.composite-media-query').to have_rule('width: 100%')
+    end
+  end
 end
diff --git a/test/media.scss b/test/media.scss
index 7a4b8be3..95edab01 100644
--- a/test/media.scss
+++ b/test/media.scss
@@ -1,5 +1,7 @@
 @import 'setup';
 
+$composite: new-breakpoint(max-width 768px min-width 110px orientation portait 6);
+
 .media-default {
   @include media(481px) {
     color: #000;
@@ -29,3 +31,9 @@
     @include span-columns(6);
   }
 }
+
+.composite-media-query {
+  @include media($composite) {
+    @include span-columns(6);
+  }
+}