Browse files

Improve notation consistency in code blocks

  • Loading branch information...
1 parent 37e2623 commit 802b45f50b1d8cbda99d90215f6f0eb73bf4bb2f @kaelig kaelig committed Aug 13, 2012
Showing with 59 additions and 28 deletions.
  1. +59 −28 doc-src/SASS_REFERENCE.md
View
87 doc-src/SASS_REFERENCE.md
@@ -658,7 +658,9 @@ For example:
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
- content: "Hi, Firefox users!"; } }
+ content: "Hi, Firefox users!";
+ }
+ }
@include firefox-message(".header");
@@ -791,8 +793,7 @@ For example:
is compiled to:
p {
- font: 12px/30px;
- }
+ font: 12px/30px; }
#### Color Operations
@@ -1013,7 +1014,9 @@ and property names using #{} interpolation syntax:
$name: foo;
$attr: border;
- p.#{$name} { #{$attr}-color: blue; }
+ p.#{$name} {
+ #{$attr}-color: blue;
+ }
is compiled to:
@@ -1035,8 +1038,7 @@ For example:
is compiled to:
p {
- font: 12px/30px;
- }
+ font: 12px/30px; }
### Variable Defaults: `!default`
@@ -1371,30 +1373,42 @@ It's possible to extend any selector involving only a single element,
such as `.special.cool`, `a:hover`, or `a.user[href^="http://"]`.
For example:
- .hoverlink {@extend a:hover}
+ .hoverlink {
+ @extend a:hover;
+ }
Just like with classes, this means that all styles defined for `a:hover`
are also applied to `.hoverlink`.
For example:
- .hoverlink {@extend a:hover}
- a:hover {text-decoration: underline}
+ .hoverlink {
+ @extend a:hover;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
is compiled to:
- a:hover, .hoverlink {text-decoration: underline}
+ a:hover, .hoverlink {
+ text-decoration: underline; }
Just like with `.error.intrusion` above,
any rule that uses `a:hover` will also work for `.hoverlink`,
even if they have other selectors as well.
For example:
- .hoverlink {@extend a:hover}
- .comment a.user:hover {font-weight: bold}
+ .hoverlink {
+ @extend a:hover;
+ }
+ .comment a.user:hover {
+ font-weight: bold;
+ }
is compiled to:
- .comment a.user:hover, .comment .hoverlink.user {font-weight: bold}
+ .comment a.user:hover, .comment .user.hoverlink {
+ font-weight: bold; }
#### Multiple Extends
@@ -1487,11 +1501,15 @@ Selector sequences, such as `.foo .bar` or `.foo + .bar`, currently can't be ext
However, it is possible for nested selectors themselves to use `@extend`.
For example:
- #fake-links .link {@extend a}
+ #fake-links .link {
+ @extend a;
+ }
a {
color: blue;
- &:hover {text-decoration: underline}
+ &:hover {
+ text-decoration: underline;
+ }
}
is compiled to
@@ -1507,8 +1525,12 @@ Sometimes a selector sequence extends another selector that appears in another s
In this case, the two sequences need to be merged.
For example:
- #admin .tabbar a {font-weight: bold}
- #demo .overview .fakelink {@extend a}
+ #admin .tabbar a {
+ font-weight: bold;
+ }
+ #demo .overview .fakelink {
+ @extend a;
+ }
While it would technically be possible
to generate all selectors that could possibly match either sequence,
@@ -1522,8 +1544,12 @@ one with the first sequence before the second,
and one with the second sequence before the first.
For example:
- #admin .tabbar a {font-weight: bold}
- #demo .overview .fakelink {@extend a}
+ #admin .tabbar a {
+ font-weight: bold;
+ }
+ #demo .overview .fakelink {
+ @extend a;
+ }
is compiled to:
@@ -1538,8 +1564,12 @@ and only the differences (if any still exist) will alternate.
In this example, both sequences contain the id `#admin`,
so the resulting selectors will merge those two ids:
- #admin .tabbar a {font-weight: bold}
- #admin .overview .fakelink {@extend a}
+ #admin .tabbar a {
+ font-weight: bold;
+ }
+ #admin .overview .fakelink {
+ @extend a;
+ }
This is compiled to:
@@ -1579,15 +1609,16 @@ However, placeholder selectors can be extended, just like classes and ids.
The extended selectors will be generated, but the base placeholder selector will not.
For example:
- .notice { @extend %extreme; }
+ .notice {
+ @extend %extreme;
+ }
Is compiled to:
#context a.notice {
color: blue;
font-weight: bold;
- font-size: 2em;
- }
+ font-size: 2em; }
#### The `!optional` Flag
@@ -1705,9 +1736,9 @@ and uses the styles nested beneath it if the expression returns
anything other than `false` or `null`:
p {
- @if 1 + 1 == 2 { border: 1px solid; }
- @if 5 < 3 { border: 2px dotted; }
- @if null { border: 3px double; }
+ @if 1 + 1 == 2 { border: 1px solid; }
+ @if 5 < 3 { border: 2px dotted; }
+ @if null { border: 3px double; }
}
is compiled to:
@@ -2014,7 +2045,7 @@ arguments, but are followed by `...`. For example:
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
- box-shadow: $shadows;
+ box-shadow: $shadows;
}
.shadows {

0 comments on commit 802b45f

Please sign in to comment.