Browse files

Remove comments and add specs

- Closes #140
  • Loading branch information...
1 parent a9da0cf commit 410fd9614680d48ce33d8ca3f5b229eb1ff9600a @kaishin kaishin committed Feb 10, 2014
Showing with 20 additions and 7 deletions.
  1. +2 −7 app/assets/stylesheets/grid/_media.scss
  2. +10 −0 spec/neat/media_spec.rb
  3. +8 −0 test/media.scss
View
9 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 ';
}
View
10 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
View
8 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);
+ }
+}

0 comments on commit 410fd96

Please sign in to comment.