Permalink
Browse files

Add more documentation for &. Fixes #31

  • Loading branch information...
1 parent 33ece85 commit c409bf6ecd653ecebee0bcf63db8320ca0ea0cc6 @lukeapage lukeapage committed Oct 21, 2012
Showing with 31 additions and 0 deletions.
  1. +31 −0 templates/pages/doc.md
@@ -359,6 +359,37 @@ Will output
.bordered .top {
margin: 5px;
}
+
+Advanced Usage of &
+-------------------
+
+The & symbol can be used in selectors in order to reverse the ordering of the nesting and to multiply classes.
+
+For example:
+
+ .child, .sibling {
+ .parent & {
+ color: black;
+ }
+ & + & {
+ color: red;
+ }
+ }
+
+Will output
+
+ .parent .child,
+ .parent .sibling {
+ color: black;
+ }
+ .child + .child,
+ .child + .sibling,
+ .sibling + .child,
+ .sibling + .sibling {
+ color: red;
+ }
+
+You can also use & in mixins in order to reference nesting that is outside of your mixin.
Operations
----------

0 comments on commit c409bf6

Please sign in to comment.