From 08df8bc72cd5c839728b5171508c0e4ee3c50cb5 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 11:25:49 +0200
Subject: [PATCH 01/11] Porting Documentation - At-Rules - error

---
 source/documentation/at-rules/error.liquid | 76 ++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 source/documentation/at-rules/error.liquid

diff --git a/source/documentation/at-rules/error.liquid b/source/documentation/at-rules/error.liquid
new file mode 100644
index 000000000..8e522e1e2
--- /dev/null
+++ b/source/documentation/at-rules/error.liquid
@@ -0,0 +1,76 @@
+---
+title: "@error"
+introduction: >
+  When writing [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function) that take arguments,
+  you usually want to ensure that those arguments have the types and formats
+  your API expects. If they aren't, the user needs to be notified and your
+  mixin/function needs to stop running.
+---
+{% markdown %}
+Sass makes this easy with the `@error` rule, which is written
+`@error <expression>`. It prints the value of the [expression][] (usually a
+string) along with a stack trace indicating how the current mixin or function
+was called. Once the error is printed, Sass stops compiling the stylesheet and
+tells whatever system is running it that an error occurred.
+
+[expression]: /documentation/syntax/structure#expressions
+{% endmarkdown %}
+
+{% codeExample 'error', false %}
+@mixin reflexive-position($property, $value) {
+  @if $property != left and $property != right {
+    @error "Property #{$property} must be either left or right.";
+  }
+
+  $left-value: if($property == right, initial, $value);
+  $right-value: if($property == right, $value, initial);
+
+  left: $left-value;
+  right: $right-value;
+  [dir=rtl] & {
+    left: $right-value;
+    right: $left-value;
+  }
+}
+
+.sidebar {
+  @include reflexive-position(top, 12px);
+  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  // Error: Property top must be either left or right.
+}
+===
+@mixin reflexive-position($property, $value)
+  @if $property != left and $property != right
+    @error "Property #{$property} must be either left or right."
+
+
+  $left-value: if($property == right, initial, $value)
+  $right-value: if($property == right, $value, initial)
+
+  left: $left-value
+  right: $right-value
+  [dir=rtl] &
+    left: $right-value
+    right: $left-value
+
+.sidebar
+  @include reflexive-position(top, 12px)
+  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  // Error: Property top must be either left or right.
+{% endcodeExample %}
+
+{% markdown %}
+The exact format of the error and stack trace varies from implementation to
+implementation, and can also depend on your build system. This is what it looks
+like in Dart Sass when run from the command line:
+
+```
+Error: "Property top must be either left or right."
+  ╷
+3 │     @error "Property #{$property} must be either left or right.";
+  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+  example.scss 3:5   reflexive-position()
+  example.scss 19:3  root stylesheet
+```
+{% endmarkdown %}
\ No newline at end of file

From 060eeb21dba2947c2187dc48b63fcbb818a6b93a Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 11:29:45 +0200
Subject: [PATCH 02/11] Porting Documentation - At-Rules - warn

---
 source/documentation/at-rules/warn.liquid | 66 +++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 source/documentation/at-rules/warn.liquid

diff --git a/source/documentation/at-rules/warn.liquid b/source/documentation/at-rules/warn.liquid
new file mode 100644
index 000000000..96ad4e6a6
--- /dev/null
+++ b/source/documentation/at-rules/warn.liquid
@@ -0,0 +1,66 @@
+---
+title: "@warn"
+introduction: >
+  When writing [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function), you may want to
+  discourage users from passing certain arguments or certain values. They may be
+  passing legacy arguments that are now deprecated, or they may be calling your
+  API in a way that’s not quite optimal.
+---
+
+{% markdown %}
+The `@warn` rule is designed just for that. It's written `@warn <expression>`
+and it prints the value of the [expression][] (usually a string) for the user,
+along with a stack trace indicating how the current mixin or function was
+called. Unlike the [`@error` rule][], though, it doesn't stop Sass entirely.
+
+[expression]: /documentation/syntax/structure#expressions
+[`@error` rule]: /documentation/at-rules/error
+{% endmarkdown %}
+
+{% codeExample 'warn' %}
+$known-prefixes: webkit, moz, ms, o;
+
+@mixin prefix($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if not index($known-prefixes, $prefix) {
+      @warn "Unknown prefix #{$prefix}.";
+    }
+
+    -#{$prefix}-#{$property}: $value;
+  }
+  #{$property}: $value;
+}
+
+.tilt {
+  // Oops, we typo'd "webkit" as "wekbit"!
+  @include prefix(transform, rotate(15deg), wekbit ms);
+}
+===
+$known-prefixes: webkit, moz, ms, o
+
+@mixin prefix($property, $value, $prefixes)
+  @each $prefix in $prefixes
+    @if not index($known-prefixes, $prefix)
+      @warn "Unknown prefix #{$prefix}."
+
+
+    -#{$prefix}-#{$property}: $value
+
+  #{$property}: $value
+
+
+.tilt
+  // Oops, we typo'd "webkit" as "wekbit"!
+  @include prefix(transform, rotate(15deg), wekbit ms)
+{% endcodeExample %}
+
+{% markdown %}
+The exact format of the warning and stack trace varies from implementation to
+implementation. This is what it looks like in Dart Sass:
+
+```
+Warning: Unknown prefix wekbit.
+    example.scss 6:7   prefix()
+    example.scss 16:3  root stylesheet
+```
+{% endmarkdown %}
\ No newline at end of file

From 857bc1495dca915e8b8461f417794d79d2c1e272 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 11:32:47 +0200
Subject: [PATCH 03/11] Porting Documentation - At-Rules - debug

---
 source/documentation/at-rules/debug.liquid | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 source/documentation/at-rules/debug.liquid

diff --git a/source/documentation/at-rules/debug.liquid b/source/documentation/at-rules/debug.liquid
new file mode 100644
index 000000000..c489f43c7
--- /dev/null
+++ b/source/documentation/at-rules/debug.liquid
@@ -0,0 +1,42 @@
+---
+title: "@debug"
+introduction: >
+  Sometimes it’s useful to see the value of a [variable](/documentation/variables) or
+  [expression](/documentation/syntax/structure#expressions) while you’re developing your
+  stylesheet. That’s what the `@debug` rule is for: it’s written
+  `@debug <expression>`, and it prints the value of that expression, along with
+  the filename and line number.
+---
+{% codeExample 'debug', false %}
+@mixin inset-divider-offset($offset, $padding) {
+  $divider-offset: (2 * $padding) + $offset;
+  @debug "divider offset: #{$divider-offset}";
+
+  margin-left: $divider-offset;
+  width: calc(100% - #{$divider-offset});
+}
+===
+@mixin inset-divider-offset($offset, $padding)
+  $divider-offset: (2 * $padding) + $offset
+  @debug "divider offset: #{$divider-offset}"
+
+  margin-left: $divider-offset
+  width: calc(100% - #{$divider-offset})
+{% endcodeExample %}
+
+{% markdown %}
+The exact format of the debug message varies from implementation to
+implementation. This is what it looks like in Dart Sass:
+
+```
+test.scss:3 Debug: divider offset: 132px
+```
+
+{% funFact %}
+  You can pass any value to `@debug`, not just a string! It prints the same
+  representation of that value as the [`meta.inspect()` function][].
+
+  [`meta.inspect()` function]: /documentation/modules/meta#inspect
+{% endfunFact %}
+
+{% endmarkdown %}
\ No newline at end of file

From 432d0ed1174771af1bed182dea40bba07301f0be Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 11:37:23 +0200
Subject: [PATCH 04/11] Porting Documentation - At-Rules - at-root

---
 source/documentation/at-rules/at-root.liquid | 78 ++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 source/documentation/at-rules/at-root.liquid

diff --git a/source/documentation/at-rules/at-root.liquid b/source/documentation/at-rules/at-root.liquid
new file mode 100644
index 000000000..91105a249
--- /dev/null
+++ b/source/documentation/at-rules/at-root.liquid
@@ -0,0 +1,78 @@
+---
+title: "@at-root"
+introduction: >
+  The `@at-root` rule is usually written `@at-root <selector> { ... }` and
+  causes everything within it to be emitted at the root of the document instead
+  of using the normal nesting. It's most often used when doing [advanced
+  nesting](/documentation/style-rules/parent-selector#advanced-nesting) with the [SassScript
+  parent selector](/documentation/style-rules/parent-selector#in-sassscript) and [selector
+  functions](/documentation/modules/selector).
+---
+
+{% render 'code-snippets/example-advanced-nesting' %}
+
+{% markdown %}
+The `@at-root` rule is necessary here because Sass doesn't know what
+interpolation was used to generate a selector when it's performing selector
+nesting. This means it will automatically add the outer selector to the inner
+selector *even if* you used `&` as a SassScript expression. The `@at-root`
+explicitly tells Sass not to include the outer selector.
+
+{% funFact %}
+The `@at-root` rule can also be written `@at-root { ... }` to put multiple style
+rules at the root of the document. In fact, `@at-root <selector> { ... }` is
+just a shorthand for `@at-root { <selector> { ... } }`!
+{% endfunFact %}
+
+## Beyond Style Rules
+
+On its own, `@at-root` only gets rid of [style rules][]. Any at-rules like
+[`@media`][] or [`@supports`][] will be left in. If this isn't what you want,
+though, you can control exactly what it includes or excludes using syntax like
+[media query features][], written `@at-root (with: <rules...>) { ... }` or
+`@at-root (without: <rules...>) { ... }`. The `(without: ...)` query tells Sass
+which rules should be excluded; the `(with: ...)` query excludes all rules
+*except* those that are listed.
+
+[style rules]: /documentation/style-rules
+[`@media`]: /documentation/at-rules/css#media
+[`@supports`]: /documentation/at-rules/css#supports
+[media query features]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features
+{% endmarkdown %}
+
+{% codeExample 'at-root' %}
+@media print {
+  .page {
+    width: 8in;
+
+    @at-root (without: media) {
+      color: #111;
+    }
+
+    @at-root (with: rule) {
+      font-size: 1.2em;
+    }
+  }
+}
+===
+@media print
+  .page
+    width: 8in
+
+    @at-root (without: media)
+      color: #111
+
+
+    @at-root (with: rule)
+      font-size: 1.2em
+{% endcodeExample %}
+
+{% markdown %}
+In addition to the names of at-rules, there are two special values that can be
+used in queries:
+
+* `rule` refers to style rules. For example, `@at-root (with: rule)` excludes
+  all at-rules but preserves style rules.
+
+* `all` refers to all at-rules *and* style rules should be excluded.
+{% endmarkdown %}
\ No newline at end of file

From 34a5c6738e7cd5d002eae03b5a3780aee59945b4 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 11:56:10 +0200
Subject: [PATCH 05/11] Porting Documentation - At-Rules - Flow Control - index

---
 .../documentation/at-rules/control/index.md   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 source/documentation/at-rules/control/index.md

diff --git a/source/documentation/at-rules/control/index.md b/source/documentation/at-rules/control/index.md
new file mode 100644
index 000000000..4f75c661f
--- /dev/null
+++ b/source/documentation/at-rules/control/index.md
@@ -0,0 +1,21 @@
+---
+title: Flow Control Rules
+introduction: >
+  Sass provides a number of at-rules that make it possible to control whether
+  styles get emitted, or to emit them multiple times with small variations. They
+  can also be used in [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function) to write small
+  algorithms to make writing your Sass easier. Sass supports four flow control
+  rules:
+---
+
+* [`@if`](/documentation/at-rules/control/if) controls whether or not a block is evaluated.
+
+* [`@each`](/documentation/at-rules/control/each) evaluates a block for each element in a [list][] or
+  each pair in a [map][].
+
+* [`@for`](/documentation/at-rules/control/for) evaluates a block a certain number of times.
+
+* [`@while`](/documentation/at-rules/control/while) evaluates a block until a certain condition is met.
+
+[list]: /documentation/values/lists
+[map]: /documentation/values/maps

From 8829f3fe40e6e4e67260e36602699add5fcce516 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 11:56:49 +0200
Subject: [PATCH 06/11] Porting Documentation - At-Rules - Flow Control - if
 and else

---
 source/code-snippets/example-if.liquid        |  29 ++++
 .../documentation/at-rules/control/if.liquid  | 144 ++++++++++++++++++
 .../snippets/truthiness-and-falsiness.liquid  |  23 +++
 3 files changed, 196 insertions(+)
 create mode 100644 source/code-snippets/example-if.liquid
 create mode 100644 source/documentation/at-rules/control/if.liquid
 create mode 100644 source/documentation/snippets/truthiness-and-falsiness.liquid

diff --git a/source/code-snippets/example-if.liquid b/source/code-snippets/example-if.liquid
new file mode 100644
index 000000000..0832a6bb9
--- /dev/null
+++ b/source/code-snippets/example-if.liquid
@@ -0,0 +1,29 @@
+{% codeExample 'example-if' %}
+@mixin avatar($size, $circle: false) {
+  width: $size;
+  height: $size;
+
+  @if $circle {
+    border-radius: $size / 2;
+  }
+}
+
+.square-av {
+  @include avatar(100px, $circle: false);
+}
+.circle-av {
+  @include avatar(100px, $circle: true);
+}
+===
+@mixin avatar($size, $circle: false)
+  width: $size
+  height: $size
+
+  @if $circle
+    border-radius: $size / 2
+
+.square-av
+  @include avatar(100px, $circle: false)
+.circle-av
+  @include avatar(100px, $circle: true)
+{% endcodeExample %}
diff --git a/source/documentation/at-rules/control/if.liquid b/source/documentation/at-rules/control/if.liquid
new file mode 100644
index 000000000..6365bf33d
--- /dev/null
+++ b/source/documentation/at-rules/control/if.liquid
@@ -0,0 +1,144 @@
+---
+title: "@if and @else"
+table_of_contents: true
+introduction: >
+  The `@if` rule is written `@if <expression> { ... }`, and it controls whether
+  or not its block gets evaluated (including emitting any styles as CSS). The
+  [expression](/documentation/syntax/structure#expressions) usually returns either
+  [`true` or `false`](/documentation/values/booleans)—if the expression returns `true`,
+  the block is evaluated, and if the expression returns `false` it’s not.
+---
+
+{% render 'code-snippets/example-if' %}
+
+{% markdown %}
+## `@else`
+
+An `@if` rule can optionally be followed by an `@else` rule, written
+`@else { ... }`. This rule's block is evaluated if the `@if` expression returns
+`false`.
+{% endmarkdown %}
+
+{% codeExample 'if' %}
+$light-background: #f2ece4;
+$light-text: #036;
+$dark-background: #6b717f;
+$dark-text: #d2e1dd;
+
+@mixin theme-colors($light-theme: true) {
+  @if $light-theme {
+    background-color: $light-background;
+    color: $light-text;
+  } @else {
+    background-color: $dark-background;
+    color: $dark-text;
+  }
+}
+
+.banner {
+  @include theme-colors($light-theme: true);
+  body.dark & {
+    @include theme-colors($light-theme: false);
+  }
+}
+===
+$light-background: #f2ece4
+$light-text: #036
+$dark-background: #6b717f
+$dark-text: #d2e1dd
+
+@mixin theme-colors($light-theme: true)
+  @if $light-theme
+    background-color: $light-background
+    color: $light-text
+  @else
+    background-color: $dark-background
+    color: $dark-text
+
+.banner
+  @include theme-colors($light-theme: true)
+  body.dark &
+    @include theme-colors($light-theme: false)
+{% endcodeExample %}
+
+{% markdown %}
+Conditional expressions may contain [boolean operators][] (`and`, `or`, `not`).
+
+[boolean operators]: /documentation/operators/boolean
+
+### `@else if`
+
+You can also choose whether to evaluate an `@else` rule's block by writing it
+`@else if <expression> { ... }`. If you do, the block is evaluated only if the
+preceding `@if`'s expression returns `false` *and* the `@else if`'s expression
+returns `true`.
+
+In fact, you can chain as many `@else if`s as you want after an `@if`. The
+first block in the chain whose expression returns `true` will be evaluated, and
+no others. If there's a plain `@else` at the end of the chain, its block will be
+evaluated if every other block fails.
+{% endmarkdown %}
+
+{% codeExample 'else' %}
+@use "sass:math";
+
+@mixin triangle($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: math.div($size, 2);
+
+  @if $direction == up {
+    border-bottom-color: $color;
+  } @else if $direction == right {
+    border-left-color: $color;
+  } @else if $direction == down {
+    border-top-color: $color;
+  } @else if $direction == left {
+    border-right-color: $color;
+  } @else {
+    @error "Unknown direction #{$direction}.";
+  }
+}
+
+.next {
+  @include triangle(5px, black, right);
+}
+===
+@use "sass:math"
+
+@mixin triangle($size, $color, $direction)
+  height: 0
+  width: 0
+
+  border-color: transparent
+  border-style: solid
+  border-width: math.div($size, 2)
+
+  @if $direction == up
+    border-bottom-color: $color
+  @else if $direction == right
+    border-left-color: $color
+  @else if $direction == down
+    border-top-color: $color
+  @else if $direction == left
+    border-right-color: $color
+  @else
+    @error "Unknown direction #{$direction}."
+
+.next
+  @include triangle(5px, black, right)
+===
+.next {
+  height: 0;
+  width: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 2.5px;
+  border-left-color: black;
+}
+{% endcodeExample %}
+
+{% render  'documentation/snippets/truthiness-and-falsiness' %}
diff --git a/source/documentation/snippets/truthiness-and-falsiness.liquid b/source/documentation/snippets/truthiness-and-falsiness.liquid
new file mode 100644
index 000000000..1b61c3b42
--- /dev/null
+++ b/source/documentation/snippets/truthiness-and-falsiness.liquid
@@ -0,0 +1,23 @@
+{% markdown %}
+## Truthiness and Falsiness
+
+Anywhere `true` or `false` are allowed, you can use other values as well. The
+values `false` and [`null`][] are *falsey*, which means Sass considers them to
+indicate falsehood and cause conditions to fail. Every other value is considered
+*truthy*, so Sass considers them to work like `true` and cause conditions to
+succeed.
+
+[`null`]: /documentation/values/null
+
+For example, if you want to check if a string contains a space, you can just
+write `string.index($string, " ")`. The [`string.index()` function][] returns
+`null` if the string isn't found and a number otherwise.
+
+[`string.index()` function]: /documentation/modules/string#index
+
+{% headsUp %}
+Some languages consider more values falsey than just `false` and `null`. Sass
+isn't one of those languages! Empty strings, empty lists, and the number `0`
+are all truthy in Sass.
+{% endheadsUp %}
+{% endmarkdown %}

From 3d45ca2ce78f3da9ab519fd9bc8b4593ccdcb959 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 12:10:07 +0200
Subject: [PATCH 07/11] Porting Documentation - At-Rules - Flow Control - each

---
 source/code-snippets/example-each-list.liquid | 19 +++++
 source/code-snippets/example-each-map.liquid  | 19 +++++
 .../at-rules/control/each.liquid              | 70 +++++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 source/code-snippets/example-each-list.liquid
 create mode 100644 source/code-snippets/example-each-map.liquid
 create mode 100644 source/documentation/at-rules/control/each.liquid

diff --git a/source/code-snippets/example-each-list.liquid b/source/code-snippets/example-each-list.liquid
new file mode 100644
index 000000000..d64e80bd9
--- /dev/null
+++ b/source/code-snippets/example-each-list.liquid
@@ -0,0 +1,19 @@
+{% codeExample 'each-list' %}
+$sizes: 40px, 50px, 80px;
+
+@each $size in $sizes {
+  .icon-#{$size} {
+    font-size: $size;
+    height: $size;
+    width: $size;
+  }
+}
+===
+$sizes: 40px, 50px, 80px
+
+@each $size in $sizes
+  .icon-#{$size}
+    font-size: $size
+    height: $size
+    width: $size
+{% endcodeExample %}
diff --git a/source/code-snippets/example-each-map.liquid b/source/code-snippets/example-each-map.liquid
new file mode 100644
index 000000000..76dfba284
--- /dev/null
+++ b/source/code-snippets/example-each-map.liquid
@@ -0,0 +1,19 @@
+{% codeExample 'each-map' %}
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
+
+@each $name, $glyph in $icons {
+  .icon-#{$name}:before {
+    display: inline-block;
+    font-family: "Icon Font";
+    content: $glyph;
+  }
+}
+===
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
+
+@each $name, $glyph in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+{% endcodeExample %}
diff --git a/source/documentation/at-rules/control/each.liquid b/source/documentation/at-rules/control/each.liquid
new file mode 100644
index 000000000..54a8a4ffc
--- /dev/null
+++ b/source/documentation/at-rules/control/each.liquid
@@ -0,0 +1,70 @@
+---
+title: "@each"
+introduction: >
+  The `@each` rule makes it easy to emit styles or evaluate code for each
+  element of a [list](/documentation/values/lists) or each pair in a
+  [map](/documentation/values/maps). It’s great for repetitive styles that only have a
+  few variations between them. It’s usually written `@each <variable> in
+  <expression> { ... }`, where the
+  [expression](/documentation/syntax/structure#expressions) returns a list. The block is
+  evaluated for each element of the list in turn, which is assigned to the given
+  variable name.
+---
+
+{% render 'code-snippets/example-each-list' %} 
+
+{% markdown %}
+## With Maps
+
+You can also use `@each` to iterate over every key/value pair in a map by
+writing it `@each <variable>, <variable> in <expression> { ... }`. The key is
+assigned to the first variable name, and the element is assigned to the second.
+{% endmarkdown %}
+
+{% render 'code-snippets/example-each-map' %}
+
+{% markdown %}
+## Destructuring
+
+If you have a list of lists, you can use `@each` to automatically assign
+variables to each of the values from the inner lists by writing it
+`@each <variable...> in <expression> { ... }`. This is known as *destructuring*,
+since the variables match the structure of the inner lists. Each variable name
+is assigned to the value at the corresponding position in the list, or
+[`null`][] if the list doesn't have enough values.
+
+[`null`]: /documentation/values/null
+{% endmarkdown %}
+
+{% codeExample 'each' %}
+$icons:
+  "eye" "\f112" 12px,
+  "start" "\f12e" 16px,
+  "stop" "\f12f" 10px;
+
+@each $name, $glyph, $size in $icons {
+  .icon-#{$name}:before {
+    display: inline-block;
+    font-family: "Icon Font";
+    content: $glyph;
+    font-size: $size;
+  }
+}
+===
+$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px
+
+@each $name, $glyph, $size in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+    font-size: $size
+{% endcodeExample %}
+
+{% funFact %}
+Because `@each` supports destructuring and [maps count as lists of lists][],
+`@each`'s map support works without needing special support for maps in
+particular.
+
+[maps count as lists of lists]: /documentation/values/maps
+{% endfunFact %}

From 3d7f7a0bb8e266a7068737bc61e2dbb404e8cd57 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 12:12:01 +0200
Subject: [PATCH 08/11] Porting Documentation - At-Rules - Flow Control - for

---
 .../documentation/at-rules/control/for.liquid | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 source/documentation/at-rules/control/for.liquid

diff --git a/source/documentation/at-rules/control/for.liquid b/source/documentation/at-rules/control/for.liquid
new file mode 100644
index 000000000..20be7f432
--- /dev/null
+++ b/source/documentation/at-rules/control/for.liquid
@@ -0,0 +1,27 @@
+---
+title: "@for"
+introduction: >
+  The `@for` rule, written `@for <variable> from <expression> to <expression>
+  { ... }` or `@for <variable> from <expression> through <expression> { ... }`,
+  counts up or down from one number (the result of the first
+  [expression](/documentation/syntax/structure#expressions)) to another (the result of
+  the second) and evaluates a block for each number in between. Each number
+  along the way is assigned to the given variable name. If `to` is used, the
+  final number is excluded; if `through` is used, it's included.
+---
+
+{% codeExample 'for' %}
+$base-color: #036;
+
+@for $i from 1 through 3 {
+  ul:nth-child(3n + #{$i}) {
+    background-color: lighten($base-color, $i * 5%);
+  }
+}
+===
+$base-color: #036
+
+@for $i from 1 through 3
+  ul:nth-child(3n + #{$i})
+    background-color: lighten($base-color, $i * 5%)
+{% endcodeExample %}

From 40b3639b33bb469f9fb39bbea43f77466b645c00 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 12:16:14 +0200
Subject: [PATCH 09/11] Porting Documentation - At-Rules - Flow Control - while

---
 .../at-rules/control/while.liquid             | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 source/documentation/at-rules/control/while.liquid

diff --git a/source/documentation/at-rules/control/while.liquid b/source/documentation/at-rules/control/while.liquid
new file mode 100644
index 000000000..2a6d62cda
--- /dev/null
+++ b/source/documentation/at-rules/control/while.liquid
@@ -0,0 +1,52 @@
+---
+title: "@while"
+introduction: >
+  The `@while` rule, written `@while <expression> { ... }`, evaluates its block
+  if its [expression](/documentation/syntax/structure#expressions) returns `true`. Then,
+  if its expression still returns `true`, it evaluates its block again. This
+  continues until the expression finally returns `false`.
+---
+
+{% codeExample 'while' %}
+@use "sass:math";
+
+/// Divides `$value` by `$ratio` until it's below `$base`.
+@function scale-below($value, $base, $ratio: 1.618) {
+  @while $value > $base {
+    $value: math.div($value, $ratio);
+  }
+  @return $value;
+}
+
+$normal-font-size: 16px;
+sup {
+  font-size: scale-below(20px, 16px);
+}
+===
+@use "sass:math"
+
+/// Divides `$value` by `$ratio` until it's below `$base`.
+@function scale-below($value, $base, $ratio: 1.618)
+  @while $value > $base
+    $value: math.div($value, $ratio)
+  @return $value
+
+$normal-font-size: 16px
+sup
+  font-size: scale-below(20px, 16px)
+===
+sup {
+  font-size: 12.36094px;
+}
+{% endcodeExample %}
+
+{% headsUp %}
+  Although `@while` is necessary for a few particularly complex stylesheets, you're
+  usually better of using either [`@each`][] or [`@for`][] if either of them will
+  work. They're clearer for the reader, and often faster to compile as well.
+
+  [`@each`]: /documentation/at-rules/control/each
+  [`@for`]: /documentation/at-rules/control/for
+{% endheadsUp %}
+
+{% render 'documentation/snippets/truthiness-and-falsiness' %}

From 3a58b336022f3a66c4e8e10b65fa69d42656f470 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Tue, 30 May 2023 16:59:16 +0200
Subject: [PATCH 10/11] Porting Documentation - At-Rules - From CSS

---
 source/_includes/compatibility.liquid         |   6 +-
 .../documentation/at-rules/control/index.md   |   8 +-
 source/documentation/at-rules/css.liquid      | 221 ++++++++++++++++++
 source/helpers/components/compatibility.ts    |   2 +
 4 files changed, 232 insertions(+), 5 deletions(-)
 create mode 100644 source/documentation/at-rules/css.liquid

diff --git a/source/_includes/compatibility.liquid b/source/_includes/compatibility.liquid
index 9d106fa94..4d517b316 100644
--- a/source/_includes/compatibility.liquid
+++ b/source/_includes/compatibility.liquid
@@ -34,6 +34,10 @@
 
 {%- if details | strip -%}
   <div class="sl-c-callout sl-c-callout--impl-status">
-    {{ details | markdown }}
+    {% if codeExampleDetails %}
+      {{ details }}
+    {% else %}
+      {{ details | markdown }}
+    {% endif %}
   </div>
 {%- endif -%}
diff --git a/source/documentation/at-rules/control/index.md b/source/documentation/at-rules/control/index.md
index 4f75c661f..ae8b05779 100644
--- a/source/documentation/at-rules/control/index.md
+++ b/source/documentation/at-rules/control/index.md
@@ -8,14 +8,14 @@ introduction: >
   rules:
 ---
 
-* [`@if`](/documentation/at-rules/control/if) controls whether or not a block is evaluated.
+- [`@if`](/documentation/at-rules/control/if) controls whether or not a block is evaluated.
 
-* [`@each`](/documentation/at-rules/control/each) evaluates a block for each element in a [list][] or
+- [`@each`](/documentation/at-rules/control/each) evaluates a block for each element in a [list][] or
   each pair in a [map][].
 
-* [`@for`](/documentation/at-rules/control/for) evaluates a block a certain number of times.
+- [`@for`](/documentation/at-rules/control/for) evaluates a block a certain number of times.
 
-* [`@while`](/documentation/at-rules/control/while) evaluates a block until a certain condition is met.
+- [`@while`](/documentation/at-rules/control/while) evaluates a block until a certain condition is met.
 
 [list]: /documentation/values/lists
 [map]: /documentation/values/maps
diff --git a/source/documentation/at-rules/css.liquid b/source/documentation/at-rules/css.liquid
new file mode 100644
index 000000000..ba6560071
--- /dev/null
+++ b/source/documentation/at-rules/css.liquid
@@ -0,0 +1,221 @@
+---
+title: CSS At-Rules
+table_of_contents: true
+---
+{% compatibility '1.15.0', false, null, false,  "Name Interpolation"%}
+LibSass, Ruby Sass, and older versions of Dart Sass don't support
+[interpolation][] in at-rule names. They do support interpolation in values.
+
+[interpolation]: /documentation/interpolation
+{% endcompatibility %}
+
+{% markdown %}
+Sass supports all the at-rules that are part of CSS proper. To stay flexible and
+forwards-compatible with future versions of CSS, Sass has general support that
+covers almost all at-rules by default. A CSS at-rule is written
+`@<name> <value>`, `@<name> { ... }`, or `@<name> <value> { ... }`. The name
+must be an identifier, and the value (if one exists) can be pretty much
+anything. Both the name and the value can contain [interpolation][].
+
+[interpolation]: /documentation/interpolation
+{% endmarkdown %}
+
+{% codeExample 'css' %}
+@namespace svg url(http://www.w3.org/2000/svg);
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
+}
+
+@counter-style thumbs {
+  system: cyclic;
+  symbols: "\1F44D";
+}
+===
+@namespace svg url(http://www.w3.org/2000/svg)
+
+@font-face
+  font-family: "Open Sans"
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
+
+@counter-style thumbs
+  system: cyclic
+  symbols: "\1F44D"
+{% endcodeExample %}
+
+{% markdown %}
+If a CSS at-rule is nested within a style rule, the two automatically swap
+positions so that the at-rule is at the top level of the CSS output and the
+style rule is within it. This makes it easy to add conditional styling without
+having to rewrite the style rule's selector.
+{% endmarkdown %}
+
+{% codeExample 'nested-css-at-rule' %}
+.print-only {
+  display: none;
+
+  @media print { display: block; }
+}
+===
+.print-only
+  display: none
+
+  @media print
+    display: block
+{% endcodeExample %}
+
+{{  '## `@media`' | markdown }}
+
+{% compatibility '1.11.0', false, null, '3.7.0', 'Range Syntax', true %}
+{% markdown %}
+LibSass and older versions of Dart Sass and Ruby Sass don't support media
+queries with features written in a [range context][]. They do support other
+standard media queries.
+
+[range context]: https://www.w3.org/TR/mediaqueries-4/#mq-range-context
+{% endmarkdown %}
+
+{% codeExample 'range-syntax' %}
+@media (width <= 700px) {
+  body {
+    background: green;
+  }
+}
+===
+@media (width <= 700px)
+  body
+    background: green
+===
+@media (width <= 700px) {
+  body {
+    background: green;
+  }
+}
+{% endcodeExample %}{% endcompatibility %}
+
+{% markdown %}
+The [`@media` rule][] does all of the above and more. In addition to allowing
+interpolation, it allows [SassScript expressions][] to be used directly in the
+[feature queries][].
+
+[`@media` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+[SassScript expressions]: /documentation/syntax/structure#expressions
+[feature queries]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features
+{% endmarkdown %}
+
+{% codeExample 'media-rule' %}
+$layout-breakpoint-small: 960px;
+
+@media (min-width: $layout-breakpoint-small) {
+  .hide-extra-small {
+    display: none;
+  }
+}
+===
+$layout-breakpoint-small: 960px
+
+@media (min-width: $layout-breakpoint-small)
+  .hide-extra-small
+    display: none
+{% endcodeExample %}
+
+{% markdown %}
+When possible, Sass will also merge media queries that are nested within one
+another to make it easier to support browsers that don't yet natively support
+nested `@media` rules.
+{% endmarkdown %}
+
+{% codeExample 'merge-media-queries' %}
+@media (hover: hover) {
+  .button:hover {
+    border: 2px solid black;
+
+    @media (color) {
+      border-color: #036;
+    }
+  }
+}
+===
+@media (hover: hover)
+  .button:hover
+    border: 2px solid black
+
+    @media (color)
+      border-color: #036
+{% endcodeExample %}
+
+{% markdown %}
+## `@supports`
+
+The [`@supports` rule][] also allows [SassScript expressions][] to be used in
+the declaration queries.
+
+[SassScript expressions]: /documentation/syntax/structure#expressions
+[`@supports` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
+{% endmarkdown %}
+
+{% codeExample 'support-at-rule' %}
+@mixin sticky-position {
+  position: fixed;
+  @supports (position: sticky) {
+    position: sticky;
+  }
+}
+
+.banner {
+  @include sticky-position;
+}
+===
+@mixin sticky-position
+  position: fixed
+  @supports (position: sticky)
+    position: sticky
+
+.banner
+  @include sticky-position
+{% endcodeExample %}
+
+{% markdown %}
+## `@keyframes`
+
+The [`@keyframes` rule][] works just like a general at-rule, except that its
+child rules must be valid keyframe rules (`<number>%`, `from`, or `to`) rather
+than normal selectors.
+
+[`@keyframes` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
+{% endmarkdown %}
+
+{% codeExample 'keyframes' %}
+@keyframes slide-in {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  70% {
+    margin-left: 90%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+===
+@keyframes slide-in
+  from
+    margin-left: 100%
+    width: 300%
+
+
+  70%
+    margin-left: 90%
+    width: 150%
+
+
+  to
+    margin-left: 0%
+    width: 100%
+{% endcodeExample %}
diff --git a/source/helpers/components/compatibility.ts b/source/helpers/components/compatibility.ts
index bc1a41f20..481158f43 100644
--- a/source/helpers/components/compatibility.ts
+++ b/source/helpers/components/compatibility.ts
@@ -28,6 +28,7 @@ export const compatibility = async (
   node: string | boolean | null = null,
   ruby: string | boolean | null = null,
   feature: string | null = null,
+  codeExampleDetails: boolean | null = null,
 ) =>
   liquidEngine.renderFile('compatibility', {
     details,
@@ -36,6 +37,7 @@ export const compatibility = async (
     node,
     ruby,
     feature,
+    codeExampleDetails,
   });
 
 /**

From 5be80afa112e470c66b114ae8e1f7c9c642cf907 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 30 May 2023 16:27:01 -0400
Subject: [PATCH 11/11] review

---
 source/_includes/compatibility.liquid         |  6 +-----
 source/documentation/at-rules/at-root.liquid  |  9 +++++----
 .../at-rules/control/each.liquid              | 15 +++++++++------
 .../documentation/at-rules/control/for.liquid | 12 ++++++------
 .../documentation/at-rules/control/if.liquid  | 13 +++++++++----
 .../documentation/at-rules/control/index.md   | 19 +++++++++++--------
 .../at-rules/control/while.liquid             | 19 +++++++++++--------
 source/documentation/at-rules/css.liquid      | 16 +++++++++++-----
 source/documentation/at-rules/debug.liquid    | 17 +++++++++--------
 source/documentation/at-rules/error.liquid    | 14 +++++++++-----
 source/documentation/at-rules/warn.liquid     | 11 ++++++-----
 .../snippets/truthiness-and-falsiness.liquid  |  6 +++---
 source/helpers/components/compatibility.ts    |  4 ++--
 13 files changed, 92 insertions(+), 69 deletions(-)

diff --git a/source/_includes/compatibility.liquid b/source/_includes/compatibility.liquid
index 4d517b316..8e8c9e005 100644
--- a/source/_includes/compatibility.liquid
+++ b/source/_includes/compatibility.liquid
@@ -34,10 +34,6 @@
 
 {%- if details | strip -%}
   <div class="sl-c-callout sl-c-callout--impl-status">
-    {% if codeExampleDetails %}
-      {{ details }}
-    {% else %}
-      {{ details | markdown }}
-    {% endif %}
+    {% if useMarkdown %}{{ details | markdown }}{% else %}{{ details }}{% endif %}
   </div>
 {%- endif -%}
diff --git a/source/documentation/at-rules/at-root.liquid b/source/documentation/at-rules/at-root.liquid
index 91105a249..e9a2de1ee 100644
--- a/source/documentation/at-rules/at-root.liquid
+++ b/source/documentation/at-rules/at-root.liquid
@@ -4,9 +4,10 @@ introduction: >
   The `@at-root` rule is usually written `@at-root <selector> { ... }` and
   causes everything within it to be emitted at the root of the document instead
   of using the normal nesting. It's most often used when doing [advanced
-  nesting](/documentation/style-rules/parent-selector#advanced-nesting) with the [SassScript
-  parent selector](/documentation/style-rules/parent-selector#in-sassscript) and [selector
-  functions](/documentation/modules/selector).
+  nesting](/documentation/style-rules/parent-selector#advanced-nesting) with the
+  [SassScript parent
+  selector](/documentation/style-rules/parent-selector#in-sassscript) and
+  [selector functions](/documentation/modules/selector).
 ---
 
 {% render 'code-snippets/example-advanced-nesting' %}
@@ -75,4 +76,4 @@ used in queries:
   all at-rules but preserves style rules.
 
 * `all` refers to all at-rules *and* style rules should be excluded.
-{% endmarkdown %}
\ No newline at end of file
+{% endmarkdown %}
diff --git a/source/documentation/at-rules/control/each.liquid b/source/documentation/at-rules/control/each.liquid
index 54a8a4ffc..3dbcd4da7 100644
--- a/source/documentation/at-rules/control/each.liquid
+++ b/source/documentation/at-rules/control/each.liquid
@@ -3,15 +3,15 @@ title: "@each"
 introduction: >
   The `@each` rule makes it easy to emit styles or evaluate code for each
   element of a [list](/documentation/values/lists) or each pair in a
-  [map](/documentation/values/maps). It’s great for repetitive styles that only have a
-  few variations between them. It’s usually written `@each <variable> in
+  [map](/documentation/values/maps). It’s great for repetitive styles that only
+  have a few variations between them. It’s usually written `@each <variable> in
   <expression> { ... }`, where the
-  [expression](/documentation/syntax/structure#expressions) returns a list. The block is
-  evaluated for each element of the list in turn, which is assigned to the given
-  variable name.
+  [expression](/documentation/syntax/structure#expressions) returns a list. The
+  block is evaluated for each element of the list in turn, which is assigned to
+  the given variable name.
 ---
 
-{% render 'code-snippets/example-each-list' %} 
+{% render 'code-snippets/example-each-list' %}
 
 {% markdown %}
 ## With Maps
@@ -53,6 +53,9 @@ $icons:
 ===
 $icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px
 
+
+
+
 @each $name, $glyph, $size in $icons
   .icon-#{$name}:before
     display: inline-block
diff --git a/source/documentation/at-rules/control/for.liquid b/source/documentation/at-rules/control/for.liquid
index 20be7f432..7cf6f7734 100644
--- a/source/documentation/at-rules/control/for.liquid
+++ b/source/documentation/at-rules/control/for.liquid
@@ -1,13 +1,13 @@
 ---
 title: "@for"
 introduction: >
-  The `@for` rule, written `@for <variable> from <expression> to <expression>
-  { ... }` or `@for <variable> from <expression> through <expression> { ... }`,
+  The `@for` rule, written `@for <variable> from <expression> to <expression> {
+  ... }` or `@for <variable> from <expression> through <expression> { ... }`,
   counts up or down from one number (the result of the first
-  [expression](/documentation/syntax/structure#expressions)) to another (the result of
-  the second) and evaluates a block for each number in between. Each number
-  along the way is assigned to the given variable name. If `to` is used, the
-  final number is excluded; if `through` is used, it's included.
+  [expression](/documentation/syntax/structure#expressions)) to another (the
+  result of the second) and evaluates a block for each number in between. Each
+  number along the way is assigned to the given variable name. If `to` is used,
+  the final number is excluded; if `through` is used, it's included.
 ---
 
 {% codeExample 'for' %}
diff --git a/source/documentation/at-rules/control/if.liquid b/source/documentation/at-rules/control/if.liquid
index 6365bf33d..a23395206 100644
--- a/source/documentation/at-rules/control/if.liquid
+++ b/source/documentation/at-rules/control/if.liquid
@@ -4,9 +4,10 @@ table_of_contents: true
 introduction: >
   The `@if` rule is written `@if <expression> { ... }`, and it controls whether
   or not its block gets evaluated (including emitting any styles as CSS). The
-  [expression](/documentation/syntax/structure#expressions) usually returns either
-  [`true` or `false`](/documentation/values/booleans)—if the expression returns `true`,
-  the block is evaluated, and if the expression returns `false` it’s not.
+  [expression](/documentation/syntax/structure#expressions) usually returns
+  either [`true` or `false`](/documentation/values/booleans)—if the expression
+  returns `true`, the block is evaluated, and if the expression returns `false`
+  it’s not.
 ---
 
 {% render 'code-snippets/example-if' %}
@@ -55,6 +56,8 @@ $dark-text: #d2e1dd
     background-color: $dark-background
     color: $dark-text
 
+
+
 .banner
   @include theme-colors($light-theme: true)
   body.dark &
@@ -128,6 +131,8 @@ evaluated if every other block fails.
   @else
     @error "Unknown direction #{$direction}."
 
+
+
 .next
   @include triangle(5px, black, right)
 ===
@@ -141,4 +146,4 @@ evaluated if every other block fails.
 }
 {% endcodeExample %}
 
-{% render  'documentation/snippets/truthiness-and-falsiness' %}
+{% render 'documentation/snippets/truthiness-and-falsiness' %}
diff --git a/source/documentation/at-rules/control/index.md b/source/documentation/at-rules/control/index.md
index ae8b05779..8fcde0fae 100644
--- a/source/documentation/at-rules/control/index.md
+++ b/source/documentation/at-rules/control/index.md
@@ -3,19 +3,22 @@ title: Flow Control Rules
 introduction: >
   Sass provides a number of at-rules that make it possible to control whether
   styles get emitted, or to emit them multiple times with small variations. They
-  can also be used in [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function) to write small
-  algorithms to make writing your Sass easier. Sass supports four flow control
-  rules:
+  can also be used in [mixins](/documentation/at-rules/mixin) and
+  [functions](/documentation/at-rules/function) to write small algorithms to
+  make writing your Sass easier. Sass supports four flow control rules.
 ---
 
-- [`@if`](/documentation/at-rules/control/if) controls whether or not a block is evaluated.
+- [`@if`](/documentation/at-rules/control/if) controls whether or not a block is
+  evaluated.
 
-- [`@each`](/documentation/at-rules/control/each) evaluates a block for each element in a [list][] or
-  each pair in a [map][].
+- [`@each`](/documentation/at-rules/control/each) evaluates a block for each
+  element in a [list][] or each pair in a [map][].
 
-- [`@for`](/documentation/at-rules/control/for) evaluates a block a certain number of times.
+- [`@for`](/documentation/at-rules/control/for) evaluates a block a certain
+  number of times.
 
-- [`@while`](/documentation/at-rules/control/while) evaluates a block until a certain condition is met.
+- [`@while`](/documentation/at-rules/control/while) evaluates a block until a
+  certain condition is met.
 
 [list]: /documentation/values/lists
 [map]: /documentation/values/maps
diff --git a/source/documentation/at-rules/control/while.liquid b/source/documentation/at-rules/control/while.liquid
index 2a6d62cda..d1f73b048 100644
--- a/source/documentation/at-rules/control/while.liquid
+++ b/source/documentation/at-rules/control/while.liquid
@@ -2,9 +2,9 @@
 title: "@while"
 introduction: >
   The `@while` rule, written `@while <expression> { ... }`, evaluates its block
-  if its [expression](/documentation/syntax/structure#expressions) returns `true`. Then,
-  if its expression still returns `true`, it evaluates its block again. This
-  continues until the expression finally returns `false`.
+  if its [expression](/documentation/syntax/structure#expressions) returns
+  `true`. Then, if its expression still returns `true`, it evaluates its block
+  again. This continues until the expression finally returns `false`.
 ---
 
 {% codeExample 'while' %}
@@ -31,6 +31,8 @@ sup {
     $value: math.div($value, $ratio)
   @return $value
 
+
+
 $normal-font-size: 16px
 sup
   font-size: scale-below(20px, 16px)
@@ -41,12 +43,13 @@ sup {
 {% endcodeExample %}
 
 {% headsUp %}
-  Although `@while` is necessary for a few particularly complex stylesheets, you're
-  usually better of using either [`@each`][] or [`@for`][] if either of them will
-  work. They're clearer for the reader, and often faster to compile as well.
+Although `@while` is necessary for a few particularly complex stylesheets,
+you're usually better of using either [`@each`][] or [`@for`][] if either of
+them will work. They're clearer for the reader, and often faster to compile as
+well.
 
-  [`@each`]: /documentation/at-rules/control/each
-  [`@for`]: /documentation/at-rules/control/for
+[`@each`]: /documentation/at-rules/control/each
+[`@for`]: /documentation/at-rules/control/for
 {% endheadsUp %}
 
 {% render 'documentation/snippets/truthiness-and-falsiness' %}
diff --git a/source/documentation/at-rules/css.liquid b/source/documentation/at-rules/css.liquid
index ba6560071..11518c5d2 100644
--- a/source/documentation/at-rules/css.liquid
+++ b/source/documentation/at-rules/css.liquid
@@ -2,7 +2,9 @@
 title: CSS At-Rules
 table_of_contents: true
 ---
-{% compatibility '1.15.0', false, null, false,  "Name Interpolation"%}
+
+{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
+{% compatibility '1.15.0', false, null, false, "Name Interpolation" %}
 LibSass, Ruby Sass, and older versions of Dart Sass don't support
 [interpolation][] in at-rule names. They do support interpolation in values.
 
@@ -65,9 +67,10 @@ having to rewrite the style rule's selector.
     display: block
 {% endcodeExample %}
 
-{{  '## `@media`' | markdown }}
+{{ '## `@media`' | markdown }}
 
-{% compatibility '1.11.0', false, null, '3.7.0', 'Range Syntax', true %}
+{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
+{% compatibility '1.11.0', false, null, '3.7.0', 'Range Syntax', false %}
 {% markdown %}
 LibSass and older versions of Dart Sass and Ruby Sass don't support media
 queries with features written in a [range context][]. They do support other
@@ -76,7 +79,7 @@ standard media queries.
 [range context]: https://www.w3.org/TR/mediaqueries-4/#mq-range-context
 {% endmarkdown %}
 
-{% codeExample 'range-syntax' %}
+{% codeExample 'range-syntax', false %}
 @media (width <= 700px) {
   body {
     background: green;
@@ -92,7 +95,8 @@ standard media queries.
     background: green;
   }
 }
-{% endcodeExample %}{% endcompatibility %}
+{% endcodeExample %}
+{% endcompatibility %}
 
 {% markdown %}
 The [`@media` rule][] does all of the above and more. In addition to allowing
@@ -172,6 +176,8 @@ the declaration queries.
   @supports (position: sticky)
     position: sticky
 
+
+
 .banner
   @include sticky-position
 {% endcodeExample %}
diff --git a/source/documentation/at-rules/debug.liquid b/source/documentation/at-rules/debug.liquid
index c489f43c7..55f592fe7 100644
--- a/source/documentation/at-rules/debug.liquid
+++ b/source/documentation/at-rules/debug.liquid
@@ -1,12 +1,14 @@
 ---
 title: "@debug"
 introduction: >
-  Sometimes it’s useful to see the value of a [variable](/documentation/variables) or
-  [expression](/documentation/syntax/structure#expressions) while you’re developing your
-  stylesheet. That’s what the `@debug` rule is for: it’s written
+  Sometimes it’s useful to see the value of a
+  [variable](/documentation/variables) or
+  [expression](/documentation/syntax/structure#expressions) while you’re
+  developing your stylesheet. That’s what the `@debug` rule is for: it’s written
   `@debug <expression>`, and it prints the value of that expression, along with
   the filename and line number.
 ---
+
 {% codeExample 'debug', false %}
 @mixin inset-divider-offset($offset, $padding) {
   $divider-offset: (2 * $padding) + $offset;
@@ -31,12 +33,11 @@ implementation. This is what it looks like in Dart Sass:
 ```
 test.scss:3 Debug: divider offset: 132px
 ```
+{% endmarkdown %}
 
 {% funFact %}
-  You can pass any value to `@debug`, not just a string! It prints the same
-  representation of that value as the [`meta.inspect()` function][].
+You can pass any value to `@debug`, not just a string! It prints the same
+representation of that value as the [`meta.inspect()` function][].
 
-  [`meta.inspect()` function]: /documentation/modules/meta#inspect
+[`meta.inspect()` function]: /documentation/modules/meta#inspect
 {% endfunFact %}
-
-{% endmarkdown %}
\ No newline at end of file
diff --git a/source/documentation/at-rules/error.liquid b/source/documentation/at-rules/error.liquid
index 8e522e1e2..28bc0cc8d 100644
--- a/source/documentation/at-rules/error.liquid
+++ b/source/documentation/at-rules/error.liquid
@@ -1,11 +1,13 @@
 ---
 title: "@error"
 introduction: >
-  When writing [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function) that take arguments,
-  you usually want to ensure that those arguments have the types and formats
-  your API expects. If they aren't, the user needs to be notified and your
-  mixin/function needs to stop running.
+  When writing [mixins](/documentation/at-rules/mixin) and
+  [functions](/documentation/at-rules/function) that take arguments, you usually
+  want to ensure that those arguments have the types and formats your API
+  expects. If they aren't, the user needs to be notified and your mixin/function
+  needs to stop running.
 ---
+
 {% markdown %}
 Sass makes this easy with the `@error` rule, which is written
 `@error <expression>`. It prints the value of the [expression][] (usually a
@@ -53,6 +55,8 @@ tells whatever system is running it that an error occurred.
     left: $right-value
     right: $left-value
 
+
+
 .sidebar
   @include reflexive-position(top, 12px)
   //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -73,4 +77,4 @@ Error: "Property top must be either left or right."
   example.scss 3:5   reflexive-position()
   example.scss 19:3  root stylesheet
 ```
-{% endmarkdown %}
\ No newline at end of file
+{% endmarkdown %}
diff --git a/source/documentation/at-rules/warn.liquid b/source/documentation/at-rules/warn.liquid
index 96ad4e6a6..8426e216b 100644
--- a/source/documentation/at-rules/warn.liquid
+++ b/source/documentation/at-rules/warn.liquid
@@ -1,10 +1,11 @@
 ---
 title: "@warn"
 introduction: >
-  When writing [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function), you may want to
-  discourage users from passing certain arguments or certain values. They may be
-  passing legacy arguments that are now deprecated, or they may be calling your
-  API in a way that’s not quite optimal.
+  When writing [mixins](/documentation/at-rules/mixin) and
+  [functions](/documentation/at-rules/function), you may want to discourage
+  users from passing certain arguments or certain values. They may be passing
+  legacy arguments that are now deprecated, or they may be calling your API in a
+  way that’s not quite optimal.
 ---
 
 {% markdown %}
@@ -63,4 +64,4 @@ Warning: Unknown prefix wekbit.
     example.scss 6:7   prefix()
     example.scss 16:3  root stylesheet
 ```
-{% endmarkdown %}
\ No newline at end of file
+{% endmarkdown %}
diff --git a/source/documentation/snippets/truthiness-and-falsiness.liquid b/source/documentation/snippets/truthiness-and-falsiness.liquid
index 1b61c3b42..0b20338f4 100644
--- a/source/documentation/snippets/truthiness-and-falsiness.liquid
+++ b/source/documentation/snippets/truthiness-and-falsiness.liquid
@@ -14,10 +14,10 @@ write `string.index($string, " ")`. The [`string.index()` function][] returns
 `null` if the string isn't found and a number otherwise.
 
 [`string.index()` function]: /documentation/modules/string#index
+{% endmarkdown %}
 
 {% headsUp %}
 Some languages consider more values falsey than just `false` and `null`. Sass
-isn't one of those languages! Empty strings, empty lists, and the number `0`
-are all truthy in Sass.
+isn't one of those languages! Empty strings, empty lists, and the number `0` are
+all truthy in Sass.
 {% endheadsUp %}
-{% endmarkdown %}
diff --git a/source/helpers/components/compatibility.ts b/source/helpers/components/compatibility.ts
index 481158f43..5c74f2b9d 100644
--- a/source/helpers/components/compatibility.ts
+++ b/source/helpers/components/compatibility.ts
@@ -28,7 +28,7 @@ export const compatibility = async (
   node: string | boolean | null = null,
   ruby: string | boolean | null = null,
   feature: string | null = null,
-  codeExampleDetails: boolean | null = null,
+  useMarkdown = true,
 ) =>
   liquidEngine.renderFile('compatibility', {
     details,
@@ -37,7 +37,7 @@ export const compatibility = async (
     node,
     ruby,
     feature,
-    codeExampleDetails,
+    useMarkdown,
   });
 
 /**