Support nesting @media within @media as well.

chriseppstein · Nov 11, 2010 · 3719199 · 3719199
1 parent ee973f1
commit 3719199
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 2 deletions.
diff --git a/doc-src/SASS_CHANGELOG.md b/doc-src/SASS_CHANGELOG.md
@@ -118,6 +118,26 @@ is compiled to:
       }
     }
 
+You can also nest `@media` directives within one another.
+The queries will then be combined using the `and` operator.
+For example:
+
+    @media screen {
+      .sidebar {
+        @media (orientation: landscape) {
+          width: 500px;
+        }
+      }
+    }
+
+is compiled to:
+
+    @media screen and (orientation: landscape) {
+      .sidebar {
+        width: 500px;
+      }
+    }
+
 ### Backwards Incompatibilities -- Must Read!
 
 * When `@import` is given a path without `.sass`, `.scss`, or `.css` extension,

diff --git a/doc-src/SASS_REFERENCE.md b/doc-src/SASS_REFERENCE.md
@@ -1111,6 +1111,26 @@ is compiled to:
       }
     }
 
+`@media` queries can also be nested within one another.
+The queries will then be combined using the `and` operator.
+For example:
+
+    @media screen {
+      .sidebar {
+        @media (orientation: landscape) {
+          width: 500px;
+        }
+      }
+    }
+
+is compiled to:
+
+    @media screen and (orientation: landscape) {
+      .sidebar {
+        width: 500px;
+      }
+    }
+
 ### `@extend` {#extend}
 
 There are often cases when designing a page

diff --git a/lib/sass/tree/media_node.rb b/lib/sass/tree/media_node.rb
@@ -21,7 +21,12 @@ class MediaNode < DirectiveNode
     def initialize(query)
       @query = query
       @tabs = 0
-      super("@media #{query}")
+      super('')
+    end
+
+    # @see DirectiveNode#value
+    def value
+      "@media #{query}"
     end
 
     # Pass on the parent if it's a RuleNode.
@@ -36,11 +41,22 @@ def cssize(extends, parent = nil)
 
     protected
 
+    # Merge nested media queries.
+    #
+    # @see Node#_cssize
+    def _cssize(extends, parent)
+      node = super
+      media = node.children.select {|c| c.is_a?(MediaNode)}
+      node.children.reject! {|c| c.is_a?(MediaNode)}
+      media.each {|n| n.query = "#{query} and #{n.query}"}
+      (node.children.empty? ? [] : [node]) + media
+    end
+
     # If we're passed a parent, bubble it down.
     #
     # @see Node#cssize
     def cssize!(extends, parent)
-      return super unless parent
+      return super unless parent.is_a?(RuleNode)
       new_rule = parent.dup
       new_rule.children = self.children
       self.children = Array(new_rule.cssize(extends, self))

diff --git a/test/sass/engine_test.rb b/test/sass/engine_test.rb
@@ -2327,6 +2327,34 @@ def test_media_bubbling
 SASS
   end
 
+  def test_double_media_bubbling
+    assert_equal <<CSS, render(<<SASS)
+@media bar and baz {
+  .foo {
+    c: d; } }
+CSS
+@media bar
+  @media baz
+    .foo
+      c: d
+SASS
+
+    assert_equal <<CSS, render(<<SASS)
+@media bar {
+  .foo {
+    a: b; } }
+  @media bar and baz {
+    .foo {
+      c: d; } }
+CSS
+.foo
+  @media bar
+    a: b
+    @media baz
+      c: d
+SASS
+  end
+
   def test_rule_media_rule_bubbling
     assert_equal <<CSS, render(<<SASS)
 @media bar {