Permalink
Browse files

document the @media behavior in the changlog and reference.

  • Loading branch information...
1 parent 4ac1362 commit 9a97871a3a84b64fe4fee55ad4e63b789d610f33 @chriseppstein committed Oct 1, 2010
Showing with 96 additions and 0 deletions.
  1. +36 −0 doc-src/SASS_CHANGELOG.md
  2. +60 −0 doc-src/SASS_REFERENCE.md
View
36 doc-src/SASS_CHANGELOG.md
@@ -5,7 +5,43 @@
## 3.2.0 (Unreleased)
+*Because people will ask*: Yes. All the features in this release work in both syntaxes.
+
* Add an {Sass::Script::Functions#invert `invert` function} that takes the inverse of colors.
+* Support for **nested @media directives**. `@media` directives can now be placed in a nested
+ context -- This means they can be used within selector blocks and other `@media` blocks.
+ Sass will then bubble these at-rules up to the top level where they must be in CSS.
+ Example:
+
+ nav {
+ li {
+ float: left;
+ @media screen and (max-width: 500px) {
+ clear: left; } } }
+
+ Generates:
+
+ nav li { float: left; }
+
+ @media screen and (min-width: 500px) {
+ nav li { clear: left; }
+ }
+
+ Similarly, Sass will combine nested `@media` directives for your styling pleasure:
+
+ @media screen {
+ color: red;
+ @media (min-width: 500px) { color: blue; }
+ }
+
+ Generates:
+
+ @media screen { color: red; }
+ @media (screen) and (min-width: 500px) { color: blue; }
+
+ Similarly, selectors nested within `@media` blocks are placed within their full selector
+ context, the parent-reference selector `&` will work as expected, and @media blocks can
+ be safely used within mixins.
### Backwards Incompatibilities -- Must Read!
View
60 doc-src/SASS_REFERENCE.md
@@ -492,6 +492,66 @@ is compiled to:
font-size: 30em;
font-weight: bold; }
+### Nested `@media`
+
+`@media` directives may also be nested at any depth within selector blocks and other
+`@media` blocks. The Sass compiler will bubble these blocks up to the top level where
+they are required to be in CSS. Example:
+
+ nav {
+ li {
+ float: left;
+ @media screen and (max-width: 500px) {
+ clear: left;
+ }
+ }
+ }
+
+Generates:
+
+ nav li { float: left; }
+
+ @media screen and (min-width: 500px) {
+ nav li { clear: left; }
+ }
+
+`@media` blocks can be nested and their queries will be merged:
+
+ @media screen {
+ @media (max-width: 500px) {
+ @media (min-pixel-ratio: 2) {
+ color: red;
+ }
+ }
+ }
+
+Generates:
+
+ @media (screen) and ((max-width: 500px) and (min-pixel-ratio: 2)) {
+ color: red;
+ }
+
+Selector nesting and parent references (`&`) work across nested `@media` blocks too:
+
+ nav {
+ li { float: left; }
+ &.side { background: blue; }
+ @media screen and (max-width: 500px) {
+ li { float: none; }
+ &.side { background: red; }
+ }
+ }
+
+Generates:
+
+ nav li { float: left; }
+ nav.side { background: blue; }
+ @media screen and (max-width: 500px) {
+ nav li { float: none; }
+ nav.side { background: red; }
+ }
+
+
## Comments: `/* */` and `//` {#comments}
Sass supports standard multiline CSS comments with `/* */`,

0 comments on commit 9a97871

Please sign in to comment.