Browse files

Document @extend warnings.

  • Loading branch information...
1 parent 709e4b6 commit 1d777746a47cac0fd6670b2c682c37ca419298cf @nex3 nex3 committed Jul 13, 2012
Showing with 39 additions and 0 deletions.
  1. +23 −0 doc-src/
  2. +16 −0 doc-src/
@@ -130,6 +130,29 @@ that make use of `@media` and other directives dynamically.
### Backwards Incompatibilities -- Must Read!
+#### `@extend` Warnings
+Any `@extend` that doesn't match any selectors in the document will now print a
+warning. These warnings will become errors in future versions of Sass. This will
+help protect against typos and make it clearer why broken styles aren't working.
+For example:
+ h1.notice {color: red}
+ a.important {@extend .notice}
+This will print a warning, since the only use of `.notice` can't be merged with
+You can declare that you don't want warnings for a specific `@extend` by using
+the `!optional` flag. For example:
+ h1.notice {color: red}
+ a.important {@extend .notice !optional}
+This will not print a warning.
+#### Smaller Incompatibilities
* Parent selectors followed immediately by identifiers (e.g. `&foo`)
are fully disallowed.
They were deprecated in 3.1.8.
@@ -1594,6 +1594,22 @@ Is compiled to:
font-size: 2em;
+#### The `!optional` Flag
+Normally when you extend a selector, it's an error if that `@extend` doesn't
+work. For example, if you write `a.important {@extend .notice}`, it's an error
+if there are no selectors that contain `.notice`. It's also an error if the only
+selector containing `.notice` is `h1.notice`, since `h1` conflicts with `a` and
+so no new selector would be generated.
+Sometimes, though, you want to allow an `@extend` not to produce any new
+selectors. To do so, just add the `!optional` flag after the selector. For
+ a.important {
+ @extend .notice !optional;
+ }
#### `@extend` in Directives
There are some restrictions on the use of `@extend` within directives such as

0 comments on commit 1d77774

Please sign in to comment.