From c146c76ffc87fca4e0e5858c5c8ca1c279f55cd1 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 31 May 2023 12:16:59 -0400
Subject: [PATCH] indentation for style-rules docs

---
 .../style-rules/declarations.liquid           | 338 +++++++++---------
 source/documentation/style-rules/index.liquid | 219 ++++++------
 .../style-rules/parent-selector.liquid        | 232 ++++++------
 .../style-rules/placeholder-selectors.liquid  |  76 ++--
 4 files changed, 435 insertions(+), 430 deletions(-)

diff --git a/source/documentation/style-rules/declarations.liquid b/source/documentation/style-rules/declarations.liquid
index 571ae62..0639bb6 100644
--- a/source/documentation/style-rules/declarations.liquid
+++ b/source/documentation/style-rules/declarations.liquid
@@ -10,234 +10,236 @@ introduction: >
 ---
 
 {% codeExample 'declaration' %}
-.circle {
-  $size: 100px;
-  width: $size;
-  height: $size;
-  border-radius: $size * 0.5;
-}
-===
-.circle
-  $size: 100px
-  width: $size
-  height: $size
-  border-radius: $size * 0.5
+  .circle {
+    $size: 100px;
+    width: $size;
+    height: $size;
+    border-radius: $size * 0.5;
+  }
+  ===
+  .circle
+    $size: 100px
+    width: $size
+    height: $size
+    border-radius: $size * 0.5
 {% endcodeExample %}
 
 {% markdown %}
-## Interpolation
+  ## Interpolation
 
-A property's name can include [interpolation][], which makes it possible to
-dynamically generate properties as needed. You can even interpolate the entire
-property name!
+  A property's name can include [interpolation][], which makes it possible to
+  dynamically generate properties as needed. You can even interpolate the entire
+  property name!
 
-[interpolation]: /documentation/interpolation
+  [interpolation]: /documentation/interpolation
 {% endmarkdown %}
 
 {% codeExample 'interpolation' %}
-@mixin prefix($property, $value, $prefixes) {
-  @each $prefix in $prefixes {
-    -#{$prefix}-#{$property}: $value;
+  @mixin prefix($property, $value, $prefixes) {
+    @each $prefix in $prefixes {
+      -#{$prefix}-#{$property}: $value;
+    }
+    #{$property}: $value;
   }
-  #{$property}: $value;
-}
 
-.gray {
-  @include prefix(filter, grayscale(50%), moz webkit);
-}
-===
-@mixin prefix($property, $value, $prefixes)
-  @each $prefix in $prefixes
-    -#{$prefix}-#{$property}: $value
+  .gray {
+    @include prefix(filter, grayscale(50%), moz webkit);
+  }
+  ===
+  @mixin prefix($property, $value, $prefixes)
+    @each $prefix in $prefixes
+      -#{$prefix}-#{$property}: $value
 
-  #{$property}: $value
+    #{$property}: $value
 
 
-.gray
-  @include prefix(filter, grayscale(50%), moz webkit)
+  .gray
+    @include prefix(filter, grayscale(50%), moz webkit)
 {% endcodeExample %}
 
 {% markdown %}
-## Nesting
+  ## Nesting
 
-Many CSS properties start with the same prefix that acts as a kind of namespace.
-For example, `font-family`, `font-size`, and `font-weight` all start with
-`font-`. Sass makes this easier and less redundant by allowing property
-declarations to be nested. The outer property names are added to the inner,
-separated by a hyphen.
+  Many CSS properties start with the same prefix that acts as a kind of
+  namespace. For example, `font-family`, `font-size`, and `font-weight` all
+  start with `font-`. Sass makes this easier and less redundant by allowing
+  property declarations to be nested. The outer property names are added to the
+  inner, separated by a hyphen.
 {% endmarkdown %}
 
 {% codeExample 'nesting' %}
-.enlarge {
-  font-size: 14px;
-  transition: {
-    property: font-size;
-    duration: 4s;
-    delay: 2s;
+  .enlarge {
+    font-size: 14px;
+    transition: {
+      property: font-size;
+      duration: 4s;
+      delay: 2s;
+    }
+
+    &:hover { font-size: 36px; }
   }
+  ===
+  .enlarge
+    font-size: 14px
+    transition:
+      property: font-size
+      duration: 4s
+      delay: 2s
 
-  &:hover { font-size: 36px; }
-}
-===
-.enlarge
-  font-size: 14px
-  transition:
-    property: font-size
-    duration: 4s
-    delay: 2s
-
-  &:hover
-    font-size: 36px
+    &:hover
+      font-size: 36px
 {% endcodeExample %}
 
 {% markdown %}
-Some of these CSS properties have shorthand versions that use the namespace as
-the property name. For these, you can write both the shorthand value *and* the
-more explicit nested versions.
+  Some of these CSS properties have shorthand versions that use the namespace as
+  the property name. For these, you can write both the shorthand value *and* the
+  more explicit nested versions.
 {% endmarkdown %}
 
 {% codeExample 'nesting-shorthand' %}
-.info-page {
-  margin: auto {
-    bottom: 10px;
-    top: 2px;
+  .info-page {
+    margin: auto {
+      bottom: 10px;
+      top: 2px;
+    }
   }
-}
-===
-.info-page
-  margin: auto
-    bottom: 10px
-    top: 2px
+  ===
+  .info-page
+    margin: auto
+      bottom: 10px
+      top: 2px
 {% endcodeExample %}
 
 {% markdown %}
-## Hidden Declarations
+  ## Hidden Declarations
 
-Sometimes you only want a property declaration to show up some of the time. If a
-declaration's value is [`null`][] or an empty [unquoted string][], Sass won't
-compile that declaration to CSS at all.
+  Sometimes you only want a property declaration to show up some of the time. If
+  a declaration's value is [`null`][] or an empty [unquoted string][], Sass
+  won't compile that declaration to CSS at all.
 
-[`null`]: /documentation/values/null
-[unquoted string]: /documentation/values/strings#unquoted
+  [`null`]: /documentation/values/null
+  [unquoted string]: /documentation/values/strings#unquoted
 {% endmarkdown %}
 
 {% codeExample 'hidden-declarations' %}
-$rounded-corners: false;
+  $rounded-corners: false;
 
-.button {
-  border: 1px solid black;
-  border-radius: if($rounded-corners, 5px, null);
-}
-===
-$rounded-corners: false
+  .button {
+    border: 1px solid black;
+    border-radius: if($rounded-corners, 5px, null);
+  }
+  ===
+  $rounded-corners: false
 
-.button
-  border: 1px solid black
-  border-radius: if($rounded-corners, 5px, null)
+  .button
+    border: 1px solid black
+    border-radius: if($rounded-corners, 5px, null)
 {% endcodeExample %}
 
-{{ '## Custom Properties' | markdown }}
-
-{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
-{% compatibility true, '3.5.0', null, '3.5.0', 'SassScript Syntax' %}
-Older versions of LibSass and Ruby Sass parsed custom property declarations just
-like any other property declaration, allowing the full range of SassScript
-expressions as values. Even when using these versions, it's recommended that you
-use interpolation to inject SassScript values for forwards-compatibility.
-
-See [the breaking change page][] for more details.
-
-[the breaking change page]: /documentation/breaking-changes/css-vars
-{% endcompatibility %}
-
 {% markdown %}
-[CSS custom properties][], also known as CSS variables, have an unusual
-declaration syntax: they allow almost any text at all in their declaration
-values. What's more, those values are accessible to JavaScript, so any value
-might potentially be relevant to the user. This includes values that would
-normally be parsed as SassScript.
+  ## Custom Properties
 
-[CSS Custom Properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
+  {% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
+  {% compatibility true, '3.5.0', null, '3.5.0', 'SassScript Syntax' %}
+    Older versions of LibSass and Ruby Sass parsed custom property declarations
+    just like any other property declaration, allowing the full range of
+    SassScript expressions as values. Even when using these versions, it's
+    recommended that you use interpolation to inject SassScript values for
+    forwards-compatibility.
 
-Because of this, Sass parses custom property declarations differently than other
-property declarations. All tokens, including those that look like SassScript,
-are passed through to CSS as-is. The only exception is [interpolation][], which
-is the only way to inject dynamic values into a custom property.
+    See [the breaking change page][] for more details.
 
-[interpolation]: /documentation/interpolation
+    [the breaking change page]: /documentation/breaking-changes/css-vars
+  {% endcompatibility %}
+
+  [CSS custom properties][], also known as CSS variables, have an unusual
+  declaration syntax: they allow almost any text at all in their declaration
+  values. What's more, those values are accessible to JavaScript, so any value
+  might potentially be relevant to the user. This includes values that would
+  normally be parsed as SassScript.
+
+  [CSS Custom Properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
+
+  Because of this, Sass parses custom property declarations differently than
+  other property declarations. All tokens, including those that look like
+  SassScript, are passed through to CSS as-is. The only exception is
+  [interpolation][], which is the only way to inject dynamic values into a
+  custom property.
+
+  [interpolation]: /documentation/interpolation
 {% endmarkdown %}
 
 <!-- TODO(nweiz): auto-generate this CSS once we're compiling with Dart Sass -->
 {% codeExample 'custom-properties' %}
-$primary: #81899b;
-$accent: #302e24;
-$warn: #dfa612;
+  $primary: #81899b;
+  $accent: #302e24;
+  $warn: #dfa612;
 
-:root {
-  --primary: #{$primary};
-  --accent: #{$accent};
-  --warn: #{$warn};
+  :root {
+    --primary: #{$primary};
+    --accent: #{$accent};
+    --warn: #{$warn};
 
-  // Even though this looks like a Sass variable, it's valid CSS so it's not
-  // evaluated.
-  --consumed-by-js: $primary;
-}
-===
-$primary: #81899b
-$accent: #302e24
-$warn: #dfa612
+    // Even though this looks like a Sass variable, it's valid CSS so it's not
+    // evaluated.
+    --consumed-by-js: $primary;
+  }
+  ===
+  $primary: #81899b
+  $accent: #302e24
+  $warn: #dfa612
 
-:root
-  --primary: #{$primary}
-  --accent: #{$accent}
-  --warn: #{$warn}
+  :root
+    --primary: #{$primary}
+    --accent: #{$accent}
+    --warn: #{$warn}
 
-  // Even though this looks like a Sass variable, it's valid CSS so it's not
-  // evaluated.
-  --consumed-by-js: $primary
-===
-:root {
-  --primary: #81899b;
-  --accent: #302e24;
-  --warn: #dfa612;
-  --consumed-by-js: $primary;
-}
+    // Even though this looks like a Sass variable, it's valid CSS so it's not
+    // evaluated.
+    --consumed-by-js: $primary
+  ===
+  :root {
+    --primary: #81899b;
+    --accent: #302e24;
+    --warn: #dfa612;
+    --consumed-by-js: $primary;
+  }
 {% endcodeExample %}
 
 {% headsUp false %}
-{% markdown %}
-Unfortunately, [interpolation][] removes quotes from strings, which makes it
-difficult to use quoted strings as values for custom properties when they come
-from Sass variables. As a workaround, you can use the [`meta.inspect()`
-function][] to preserve the quotes.
+  {% markdown %}
+    Unfortunately, [interpolation][] removes quotes from strings, which makes it
+    difficult to use quoted strings as values for custom properties when they
+    come from Sass variables. As a workaround, you can use the [`meta.inspect()`
+    function][] to preserve the quotes.
 
-[interpolation]: /documentation/interpolation
-[`meta.inspect()` function]: /documentation/modules/meta#inspect
-{% endmarkdown %}
+    [interpolation]: /documentation/interpolation
+    [`meta.inspect()` function]: /documentation/modules/meta#inspect
+  {% endmarkdown %}
 
-{% codeExample 'custom-properties-strings-meta' %}
-@use "sass:meta";
+  {% codeExample 'custom-properties-strings-meta' %}
+    @use "sass:meta";
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
+    $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
+    $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
 
-:root {
-  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
-  --font-family-monospace: #{meta.inspect($font-family-monospace)};
-}
-===
-@use "sass:meta"
+    :root {
+      --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
+      --font-family-monospace: #{meta.inspect($font-family-monospace)};
+    }
+    ===
+    @use "sass:meta"
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas
+    $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
+    $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas
 
-:root
-  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)}
-  --font-family-monospace: #{meta.inspect($font-family-monospace)}
-===
-:root {
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
-}
-{% endcodeExample %}
+    :root
+      --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)}
+      --font-family-monospace: #{meta.inspect($font-family-monospace)}
+    ===
+    :root {
+      --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
+      --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
+    }
+  {% endcodeExample %}
 {% endheadsUp %}
diff --git a/source/documentation/style-rules/index.liquid b/source/documentation/style-rules/index.liquid
index 06b881d..5a15b5d 100644
--- a/source/documentation/style-rules/index.liquid
+++ b/source/documentation/style-rules/index.liquid
@@ -9,168 +9,171 @@ introduction: >
 ---
 
 {% codeExample 'style-rules' %}
-.button {
-  padding: 3px 10px;
-  font-size: 12px;
-  border-radius: 3px;
-  border: 1px solid #e1e4e8;
-}
-===
-.button
-  padding: 3px 10px
-  font-size: 12px
-  border-radius: 3px
-  border: 1px solid #e1e4e8
+  .button {
+    padding: 3px 10px;
+    font-size: 12px;
+    border-radius: 3px;
+    border: 1px solid #e1e4e8;
+  }
+  ===
+  .button
+    padding: 3px 10px
+    font-size: 12px
+    border-radius: 3px
+    border: 1px solid #e1e4e8
 {% endcodeExample %}
 
 {% markdown %}
-## Nesting
+  ## Nesting
 
-But Sass wants to make your life easier. Rather than repeating the same
-selectors over and over again, you can write one style rules inside another.
-Sass will automatically combine the outer rule's selector with the inner rule's.
+  But Sass wants to make your life easier. Rather than repeating the same
+  selectors over and over again, you can write one style rules inside another.
+  Sass will automatically combine the outer rule's selector with the inner
+  rule's.
 {% endmarkdown %}
 
 {% render 'code-snippets/example-nesting' %}
 
 {% headsUp %}
-Nested rules are super helpful, but they can also make it hard to visualize how
-much CSS you're actually generating. The deeper you nest, the more bandwidth it
-takes to serve your CSS and the more work it takes the browser to render it.
-Keep those selectors shallow!
+  Nested rules are super helpful, but they can also make it hard to visualize
+  how much CSS you're actually generating. The deeper you nest, the more
+  bandwidth it takes to serve your CSS and the more work it takes the browser to
+  render it. Keep those selectors shallow!
 {% endheadsUp %}
 
 {% markdown %}
-### Selector Lists
+  ### Selector Lists
 
-Nested rules are clever about handling selector lists (that is, comma-separated
-selectors). Each complex selector (the ones between the commas) is nested
-separately, and then they're combined back into a selector list.
+  Nested rules are clever about handling selector lists (that is,
+  comma-separated selectors). Each complex selector (the ones between the
+  commas) is nested separately, and then they're combined back into a selector
+  list.
 {% endmarkdown %}
 
 {% codeExample 'selector-lists' %}
-.alert, .warning {
-  ul, p {
-    margin-right: 0;
-    margin-left: 0;
-    padding-bottom: 0;
+  .alert, .warning {
+    ul, p {
+      margin-right: 0;
+      margin-left: 0;
+      padding-bottom: 0;
+    }
   }
-}
-===
-.alert, .warning
-  ul, p
-    margin-right: 0
-    margin-left: 0
-    padding-bottom: 0
+  ===
+  .alert, .warning
+    ul, p
+      margin-right: 0
+      margin-left: 0
+      padding-bottom: 0
 {% endcodeExample %}
 
 {% markdown %}
-### Selector Combinators
+  ### Selector Combinators
 
-You can nest selectors that use [combinators][] as well. You can put the
-combinator at the end of the outer selector, at the beginning of the inner
-selector, or even all on its own in between the two.
+  You can nest selectors that use [combinators][] as well. You can put the
+  combinator at the end of the outer selector, at the beginning of the inner
+  selector, or even all on its own in between the two.
 
-[combinators]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators#Combinators
+  [combinators]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators#Combinators
 {% endmarkdown %}
 
 {% codeExample 'selector-combinators' %}
-ul > {
-  li {
-    list-style-type: none;
-  }
-}
-
-h2 {
-  + p {
-    border-top: 1px solid gray;
-  }
-}
-
-p {
-  ~ {
-    span {
-      opacity: 0.8;
+  ul > {
+    li {
+      list-style-type: none;
     }
   }
-}
-===
-ul >
-  li
-    list-style-type: none
+
+  h2 {
+    + p {
+      border-top: 1px solid gray;
+    }
+  }
+
+  p {
+    ~ {
+      span {
+        opacity: 0.8;
+      }
+    }
+  }
+  ===
+  ul >
+    li
+      list-style-type: none
 
 
 
-h2
-  + p
-    border-top: 1px solid gray
+  h2
+    + p
+      border-top: 1px solid gray
 
 
 
-p
-  ~
-    span
-      opacity: 0.8
+  p
+    ~
+      span
+        opacity: 0.8
 {% endcodeExample %}
 
 {% markdown %}
-### Advanced Nesting
+  ### Advanced Nesting
 
-If you want to do more with your nested style rules than just combine them in
-order with the descendant combinator (that is, a plain space) separating them,
-Sass has your back. See the [parent selector documentation][] for more details.
+  If you want to do more with your nested style rules than just combine them in
+  order with the descendant combinator (that is, a plain space) separating them,
+  Sass has your back. See the [parent selector documentation][] for more
+  details.
 
-[parent selector documentation]: /documentation/style-rules/parent-selector
+  [parent selector documentation]: /documentation/style-rules/parent-selector
 
-## Interpolation
+  ## Interpolation
 
-You can use [interpolation][] to inject values from [expressions][] like
-variables and function calls into your selectors. This is particularly useful
-when you're writing [mixins][], since it allows you to create selectors from
-parameters your users pass in.
+  You can use [interpolation][] to inject values from [expressions][] like
+  variables and function calls into your selectors. This is particularly useful
+  when you're writing [mixins][], since it allows you to create selectors from
+  parameters your users pass in.
 
-[interpolation]: /documentation/interpolation
-[expressions]: /documentation/syntax/structure#expressions
-[mixins]: /documentation/at-rules/mixin
+  [interpolation]: /documentation/interpolation
+  [expressions]: /documentation/syntax/structure#expressions
+  [mixins]: /documentation/at-rules/mixin
 {% endmarkdown %}
 
 {% codeExample 'interpolation' %}
-@mixin define-emoji($name, $glyph) {
-  span.emoji-#{$name} {
-    font-family: IconFont;
-    font-variant: normal;
-    font-weight: normal;
-    content: $glyph;
+  @mixin define-emoji($name, $glyph) {
+    span.emoji-#{$name} {
+      font-family: IconFont;
+      font-variant: normal;
+      font-weight: normal;
+      content: $glyph;
+    }
   }
-}
 
-@include define-emoji("women-holding-hands", "👭");
-===
-@mixin define-emoji($name, $glyph)
-  span.emoji-#{$name}
-    font-family: IconFont
-    font-variant: normal
-    font-weight: normal
-    content: $glyph
+  @include define-emoji("women-holding-hands", "👭");
+  ===
+  @mixin define-emoji($name, $glyph)
+    span.emoji-#{$name}
+      font-family: IconFont
+      font-variant: normal
+      font-weight: normal
+      content: $glyph
 
 
 
-@include define-emoji("women-holding-hands", "👭")
+  @include define-emoji("women-holding-hands", "👭")
 {% endcodeExample %}
 
 {% funFact %}
-Sass only parses selectors *after* interpolation is resolved. This means you can
-safely use interpolation to generate any part of the selector without worrying
-that it won't parse.
+  Sass only parses selectors *after* interpolation is resolved. This means you
+  can safely use interpolation to generate any part of the selector without
+  worrying that it won't parse.
 {% endfunFact %}
 
 {% markdown %}
-You can combine interpolation with the parent selector `&`, the [`@at-root`
-rule][], and [selector functions][] to wield some serious power when dynamically
-generating selectors. For more information, see the [parent selector
-documentation][].
+  You can combine interpolation with the parent selector `&`, the [`@at-root`
+  rule][], and [selector functions][] to wield some serious power when
+  dynamically generating selectors. For more information, see the [parent
+  selector documentation][].
 
-[`@at-root` rule]: /documentation/at-rules/at-root
-[selector functions]: /documentation/modules/selector
-[parent selector documentation]: /documentation/style-rules/parent-selector
+  [`@at-root` rule]: /documentation/at-rules/at-root
+  [selector functions]: /documentation/modules/selector
+  [parent selector documentation]: /documentation/style-rules/parent-selector
 {% endmarkdown %}
diff --git a/source/documentation/style-rules/parent-selector.liquid b/source/documentation/style-rules/parent-selector.liquid
index 6c3e49f..8b2f4a2 100644
--- a/source/documentation/style-rules/parent-selector.liquid
+++ b/source/documentation/style-rules/parent-selector.liquid
@@ -10,172 +10,172 @@ introduction: >
 ---
 
 {% markdown %}
-When a parent selector is used in an inner selector, it's replaced with the
-corresponding outer selector. This happens instead of the normal nesting
-behavior.
+  When a parent selector is used in an inner selector, it's replaced with the
+  corresponding outer selector. This happens instead of the normal nesting
+  behavior.
 {% endmarkdown %}
 
 {% codeExample 'parent-selector' %}
-.alert {
-  // The parent selector can be used to add pseudo-classes to the outer
-  // selector.
-  &:hover {
-    font-weight: bold;
+  .alert {
+    // The parent selector can be used to add pseudo-classes to the outer
+    // selector.
+    &:hover {
+      font-weight: bold;
+    }
+
+    // It can also be used to style the outer selector in a certain context, such
+    // as a body set to use a right-to-left language.
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: 10px;
+    }
+
+    // You can even use it as an argument to pseudo-class selectors.
+    :not(&) {
+      opacity: 0.8;
+    }
   }
-
-  // It can also be used to style the outer selector in a certain context, such
-  // as a body set to use a right-to-left language.
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: 10px;
-  }
-
-  // You can even use it as an argument to pseudo-class selectors.
-  :not(&) {
-    opacity: 0.8;
-  }
-}
-===
-.alert
-  // The parent selector can be used to add pseudo-classes to the outer
-  // selector.
-  &:hover
-    font-weight: bold
+  ===
+  .alert
+    // The parent selector can be used to add pseudo-classes to the outer
+    // selector.
+    &:hover
+      font-weight: bold
 
 
-  // It can also be used to style the outer selector in a certain context, such
-  // as a body set to use a right-to-left language.
-  [dir=rtl] &
-    margin-left: 0
-    margin-right: 10px
+    // It can also be used to style the outer selector in a certain context, such
+    // as a body set to use a right-to-left language.
+    [dir=rtl] &
+      margin-left: 0
+      margin-right: 10px
 
 
-  // You can even use it as an argument to pseudo-class selectors.
-  :not(&)
-    opacity: 0.8
+    // You can even use it as an argument to pseudo-class selectors.
+    :not(&)
+      opacity: 0.8
 {% endcodeExample %}
 
 {% headsUp %}
-Because the parent selector could be replaced by a type selector like `h1`, it's
-only allowed at the beginning of compound selectors where a type selector would
-also be allowed. For example, `span&` is not allowed.
+  Because the parent selector could be replaced by a type selector like `h1`,
+  it's only allowed at the beginning of compound selectors where a type selector
+  would also be allowed. For example, `span&` is not allowed.
 
-We're looking into loosening this restriction, though. If you'd like to help
-make that happen, check out [this GitHub issue][].
+  We're looking into loosening this restriction, though. If you'd like to help
+  make that happen, check out [this GitHub issue][].
 
-[this GitHub issue]: https://github.com/sass/sass/issues/1425
+  [this GitHub issue]: https://github.com/sass/sass/issues/1425
 {% endheadsUp %}
 
 {% markdown %}
-## Adding Suffixes
+  ## Adding Suffixes
 
-You can also use the parent selector to add extra suffixes to the outer
-selector. This is particularly useful when using a methodology like [BEM][] that
-uses highly structured class names. As long as the outer selector ends with an
-alphanumeric name (like class, ID, and element selectors), you can use the
-parent selector to append additional text.
+  You can also use the parent selector to add extra suffixes to the outer
+  selector. This is particularly useful when using a methodology like [BEM][]
+  that uses highly structured class names. As long as the outer selector ends
+  with an alphanumeric name (like class, ID, and element selectors), you can use
+  the parent selector to append additional text.
 
-[BEM]: http://getbem.com/
+  [BEM]: http://getbem.com/
 {% endmarkdown %}
 
 {% codeExample 'parent-selector-suffixes' %}
-.accordion {
-  max-width: 600px;
-  margin: 4rem auto;
-  width: 90%;
-  font-family: "Raleway", sans-serif;
-  background: #f4f4f4;
+  .accordion {
+    max-width: 600px;
+    margin: 4rem auto;
+    width: 90%;
+    font-family: "Raleway", sans-serif;
+    background: #f4f4f4;
 
-  &__copy {
-    display: none;
-    padding: 1rem 1.5rem 2rem 1.5rem;
-    color: gray;
-    line-height: 1.6;
-    font-size: 14px;
-    font-weight: 500;
+    &__copy {
+      display: none;
+      padding: 1rem 1.5rem 2rem 1.5rem;
+      color: gray;
+      line-height: 1.6;
+      font-size: 14px;
+      font-weight: 500;
 
-    &--open {
-      display: block;
+      &--open {
+        display: block;
+      }
     }
   }
-}
-===
-.accordion
-  max-width: 600px
-  margin: 4rem auto
-  width: 90%
-  font-family: "Raleway", sans-serif
-  background: #f4f4f4
+  ===
+  .accordion
+    max-width: 600px
+    margin: 4rem auto
+    width: 90%
+    font-family: "Raleway", sans-serif
+    background: #f4f4f4
 
-  &__copy
-    display: none
-    padding: 1rem 1.5rem 2rem 1.5rem
-    color: gray
-    line-height: 1.6
-    font-size: 14px
-    font-weight: 500
+    &__copy
+      display: none
+      padding: 1rem 1.5rem 2rem 1.5rem
+      color: gray
+      line-height: 1.6
+      font-size: 14px
+      font-weight: 500
 
-    &--open
-      display: block
+      &--open
+        display: block
 {% endcodeExample %}
 
 {% markdown %}
-## In SassScript
+  ## In SassScript
 
-The parent selector can also be used within SassScript. It's a special
-expression that returns the current parent selector in the same format used by
-[selector functions][]: a comma-separated list (the selector list) that contains
-space-separated lists (the complex selectors) that contain unquoted strings (the
-compound selectors).
+  The parent selector can also be used within SassScript. It's a special
+  expression that returns the current parent selector in the same format used by
+  [selector functions][]: a comma-separated list (the selector list) that
+  contains space-separated lists (the complex selectors) that contain unquoted
+  strings (the compound selectors).
 
-[selector functions]: /documentation/modules/selector#selector-values
+  [selector functions]: /documentation/modules/selector#selector-values
 {% endmarkdown %}
 
 {% codeExample 'parent-selector-sassscript' %}
-.main aside:hover,
-.sidebar p {
-  parent-selector: &;
-  // => ((unquote(".main") unquote("aside:hover")),
-  //     (unquote(".sidebar") unquote("p")))
-}
-===
-.main aside:hover,
-.sidebar p
-  parent-selector: &
-  // => ((unquote(".main") unquote("aside:hover")),
-  //     (unquote(".sidebar") unquote("p")))
+  .main aside:hover,
+  .sidebar p {
+    parent-selector: &;
+    // => ((unquote(".main") unquote("aside:hover")),
+    //     (unquote(".sidebar") unquote("p")))
+  }
+  ===
+  .main aside:hover,
+  .sidebar p
+    parent-selector: &
+    // => ((unquote(".main") unquote("aside:hover")),
+    //     (unquote(".sidebar") unquote("p")))
 {% endcodeExample %}
 
 {% markdown %}
-If the `&` expression is used outside any style rules, it returns `null`. Since
-`null` is [falsey][], this means you can easily use it to determine whether a
-mixin is being called in a style rule or not.
+  If the `&` expression is used outside any style rules, it returns `null`.
+  Since `null` is [falsey][], this means you can easily use it to determine
+  whether a mixin is being called in a style rule or not.
 
-[falsey]: /documentation/at-rules/control/if#truthiness-and-falsiness
+  [falsey]: /documentation/at-rules/control/if#truthiness-and-falsiness
 {% endmarkdown %}
 
 {% render 'code-snippets/example-if-parent-selector' %}
 
 {% markdown %}
-### Advanced Nesting
+  ### Advanced Nesting
 
-You can use `&` as a normal SassScript expression, which means you can pass it
-to functions or include it in interpolation—even in other selectors! Using it in
-combination with [selector functions][] and the [`@at-root` rule][] allows you
-to nest selectors in very powerful ways.
+  You can use `&` as a normal SassScript expression, which means you can pass it
+  to functions or include it in interpolation—even in other selectors! Using it
+  in combination with [selector functions][] and the [`@at-root` rule][] allows
+  you to nest selectors in very powerful ways.
 
-[selector functions]: /documentation/modules/selector#selector-values
-[`@at-root` rule]: /documentation/at-rules/at-root
+  [selector functions]: /documentation/modules/selector#selector-values
+  [`@at-root` rule]: /documentation/at-rules/at-root
 {% endmarkdown %}
 
 {% render 'code-snippets/example-advanced-nesting' %}
 
 {% headsUp %}
-When Sass is nesting selectors, it doesn't know what interpolation was used to
-generate them. This means it will automatically add the outer selector to the
-inner selector *even if* you used `&` as a SassScript expression. That's why you
-need to explicitly use the [`@at-root` rule][] to tell Sass not to include the
-outer selector.
+  When Sass is nesting selectors, it doesn't know what interpolation was used to
+  generate them. This means it will automatically add the outer selector to the
+  inner selector *even if* you used `&` as a SassScript expression. That's why
+  you need to explicitly use the [`@at-root` rule][] to tell Sass not to include
+  the outer selector.
 
-[`@at-root` rule]: /documentation/at-rules/at-root
+  [`@at-root` rule]: /documentation/at-rules/at-root
 {% endheadsUp %}
diff --git a/source/documentation/style-rules/placeholder-selectors.liquid b/source/documentation/style-rules/placeholder-selectors.liquid
index 5c2dd5e..b6b1469 100644
--- a/source/documentation/style-rules/placeholder-selectors.liquid
+++ b/source/documentation/style-rules/placeholder-selectors.liquid
@@ -11,56 +11,56 @@ introduction: >
 {% render 'code-snippets/example-placeholder' %}
 
 {% markdown %}
-What's the use of a selector that isn't emitted? It can still be [extended][]!
-Unlike class selectors, placeholders don't clutter up the CSS if they aren't
-extended and they don't mandate that users of a library use specific class names
-for their HTML.
+  What's the use of a selector that isn't emitted? It can still be [extended][]!
+  Unlike class selectors, placeholders don't clutter up the CSS if they aren't
+  extended and they don't mandate that users of a library use specific class
+  names for their HTML.
 
-[extended]: /documentation/at-rules/extend
+  [extended]: /documentation/at-rules/extend
 {% endmarkdown %}
 
 {% codeExample 'extended-selector' %}
-%toolbelt {
-  box-sizing: border-box;
-  border-top: 1px rgba(#000, .12) solid;
-  padding: 16px 0;
-  width: 100%;
+  %toolbelt {
+    box-sizing: border-box;
+    border-top: 1px rgba(#000, .12) solid;
+    padding: 16px 0;
+    width: 100%;
 
-  &:hover { border: 2px rgba(#000, .5) solid; }
-}
+    &:hover { border: 2px rgba(#000, .5) solid; }
+  }
 
-.action-buttons {
-  @extend %toolbelt;
-  color: #4285f4;
-}
+  .action-buttons {
+    @extend %toolbelt;
+    color: #4285f4;
+  }
 
-.reset-buttons {
-  @extend %toolbelt;
-  color: #cddc39;
-}
-===
-%toolbelt
-  box-sizing: border-box
-  border-top: 1px rgba(#000, .12) solid
-  padding: 16px 0
-  width: 100%
+  .reset-buttons {
+    @extend %toolbelt;
+    color: #cddc39;
+  }
+  ===
+  %toolbelt
+    box-sizing: border-box
+    border-top: 1px rgba(#000, .12) solid
+    padding: 16px 0
+    width: 100%
 
-  &:hover
-    border: 2px rgba(#000, .5) solid
+    &:hover
+      border: 2px rgba(#000, .5) solid
 
-.action-buttons
-  @extend %toolbelt
-  color: #4285f4
+  .action-buttons
+    @extend %toolbelt
+    color: #4285f4
 
 
-.reset-buttons
-  @extend %toolbelt
-  color: #cddc39
+  .reset-buttons
+    @extend %toolbelt
+    color: #cddc39
 {% endcodeExample %}
 
 {% markdown %}
-Placeholder selectors are useful when writing a Sass library where each style
-rule may or may not be used. As a rule of thumb, if you're writing a stylesheet
-just for your own app, it's often better to just extend a class selector if one
-is available.
+  Placeholder selectors are useful when writing a Sass library where each style
+  rule may or may not be used. As a rule of thumb, if you're writing a
+  stylesheet just for your own app, it's often better to just extend a class
+  selector if one is available.
 {% endmarkdown %}