diff --git a/source/documentation/operators/boolean.liquid b/source/documentation/operators/boolean.md
similarity index 61%
rename from source/documentation/operators/boolean.liquid
rename to source/documentation/operators/boolean.md
index 5b80169..326325a 100644
--- a/source/documentation/operators/boolean.liquid
+++ b/source/documentation/operators/boolean.md
@@ -5,14 +5,12 @@ introduction: >
   [boolean](/documentation/values/booleans) operators.
 ---
 
-{% markdown %}
-  * `not <expression>` returns the opposite of the expression's value: it turns
-    `true` into `false` and `false` into `true`.
-  * `<expression> and <expression>` returns `true` if *both* expressions' values
-    are `true`, and `false` if either is `false`.
-  * `<expression> or <expression>` returns `true` if *either* expression's value
-    is `true`, and `false` if both are `false`.
-{% endmarkdown %}
+* `not <expression>` returns the opposite of the expression's value: it turns
+  `true` into `false` and `false` into `true`.
+* `<expression> and <expression>` returns `true` if *both* expressions' values
+  are `true`, and `false` if either is `false`.
+* `<expression> or <expression>` returns `true` if *either* expression's value
+  is `true`, and `false` if both are `false`.
 
 {% codeExample 'boolean', false %}
   @debug not true; // false
diff --git a/source/documentation/operators/equality.liquid b/source/documentation/operators/equality.md
similarity index 55%
rename from source/documentation/operators/equality.liquid
rename to source/documentation/operators/equality.md
index 11d9521..bbee2c5 100644
--- a/source/documentation/operators/equality.liquid
+++ b/source/documentation/operators/equality.md
@@ -10,46 +10,42 @@ title: Equality Operators
   [transitivity]: https://en.wikipedia.org/wiki/Transitive_relation
 {% endcompatibility %}
 
-{% markdown %}
-  The equality operators return whether or not two values are the same. They're
-  written `<expression> == <expression>`, which returns whether two
-  [expressions][] are equal, and `<expression> != <expression>`, which returns
-  whether two expressions are *not* equal. Two values are considered equal if
-  they're the same type *and* the same value, which means different things for
-  different types:
+The equality operators return whether or not two values are the same. They're
+written `<expression> == <expression>`, which returns whether two
+[expressions][] are equal, and `<expression> != <expression>`, which returns
+whether two expressions are *not* equal. Two values are considered equal if
+they're the same type *and* the same value, which means different things for
+different types:
 
-  [expressions]: /documentation/syntax/structure#expressions
+[expressions]: /documentation/syntax/structure#expressions
 
-  * [Numbers][] are equal if they have the same value *and* the same units, or
-    if their values are equal when their units are converted between one
-    another.
-  * [Strings][] are unusual in that [unquoted][] and [quoted][] strings with the
-    same contents are considered equal.
-  * [Colors][] are equal if they have the same red, green, blue, and alpha
-    values.
-  * [Lists][] are equal if their contents are equal. Comma-separated lists
-    aren't equal to space-separated lists, and bracketed lists aren't equal to
-    unbracketed lists.
-  * [Maps][] are equal if their keys and values are both equal.
-  * [Calculations] are equal if their names and arguments are all equal.
-    Operation arguments are compared textually.
-  * [`true`, `false`][], and [`null`][] are only equal to themselves.
-  * [Functions][] are equal to the same function. Functions are compared *by
-    reference*, so even if two functions have the same name and definition
-    they're considered different if they aren't defined in the same place.
+* [Numbers][] are equal if they have the same value *and* the same units, or if
+  their values are equal when their units are converted between one another.
+* [Strings][] are unusual in that [unquoted][] and [quoted][] strings with the
+  same contents are considered equal.
+* [Colors][] are equal if they have the same red, green, blue, and alpha values.
+* [Lists][] are equal if their contents are equal. Comma-separated lists aren't
+  equal to space-separated lists, and bracketed lists aren't equal to
+  unbracketed lists.
+* [Maps][] are equal if their keys and values are both equal.
+* [Calculations] are equal if their names and arguments are all equal. Operation
+  arguments are compared textually.
+* [`true`, `false`][], and [`null`][] are only equal to themselves.
+* [Functions][] are equal to the same function. Functions are compared *by
+  reference*, so even if two functions have the same name and definition they're
+  considered different if they aren't defined in the same place.
 
-  [Numbers]: /documentation/values/numbers
-  [Strings]: /documentation/values/strings
-  [quoted]: /documentation/values/strings#quoted
-  [unquoted]: /documentation/values/strings#unquoted
-  [Colors]: /documentation/values/colors
-  [Lists]: /documentation/values/lists
-  [`true`, `false`]: /documentation/values/booleans
-  [`null`]: /documentation/values/null
-  [Maps]: /documentation/values/maps
-  [Calculations]: /documentation/values/calculations
-  [Functions]: /documentation/values/functions
-{% endmarkdown %}
+[Numbers]: /documentation/values/numbers
+[Strings]: /documentation/values/strings
+[quoted]: /documentation/values/strings#quoted
+[unquoted]: /documentation/values/strings#unquoted
+[Colors]: /documentation/values/colors
+[Lists]: /documentation/values/lists
+[`true`, `false`]: /documentation/values/booleans
+[`null`]: /documentation/values/null
+[Maps]: /documentation/values/maps
+[Calculations]: /documentation/values/calculations
+[Functions]: /documentation/values/functions
 
 {% codeExample 'equality', false %}
   @debug 1px == 1px; // true
diff --git a/source/documentation/operators/index.liquid b/source/documentation/operators/index.liquid
deleted file mode 100644
index a819ab9..0000000
--- a/source/documentation/operators/index.liquid
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Operators
-introduction: >
-  Sass supports a handful of useful `operators` for working with different
-  values. These include the standard mathematical operators like `+` and `*`, as
-  well as operators for various other types:
----
-
-{% markdown %}
-  {% render 'doc_snippets/operator-list', parens: false %}
-{% endmarkdown %}
-
-{% headsUp %}
-  Early on in Sass's history, it added support for mathematical operations on
-  [colors][]. These operations operated on each of the colors' RGB channels
-  separately, so adding two colors would produce a color with the sum of their
-  red channels as its red channel and so on.
-
-  [colors]: /documentation/values/colors
-
-  This behavior wasn't very useful, since it channel-by-channel RGB arithmetic
-  didn't correspond well to how humans perceive color. [Color functions][] were
-  added which are much more useful, and color operations were deprecated.
-  They're still supported in LibSass and Ruby Sass, but they'll produce warnings
-  and users are strongly encouraged to avoid them.
-
-  [Color functions]: /documentation/modules/color
-{% endheadsUp %}
-
-{% markdown %}
-  ## Order of Operations
-
-  Sass has a pretty standard [order of operations][], from tightest to loosest:
-
-  [order of operations]: https://en.wikipedia.org/wiki/Order_of_operations#Programming_languages
-
-  1. The unary operators [`not`][], [`+`, `-`][], and [`/`][].
-  2. The [`*`, `/`, and `%` operators][].
-  3. The [`+` and `-` operators][].
-  4. The [`>`, `>=`, `<` and `<=` operators][].
-  5. The [`==` and `!=` operators][].
-  6. The [`and` operator][].
-  7. The [`or` operator][].
-  8. The [`=` operator][], when it's available.
-
-  [`not`]: /documentation/operators/boolean
-  [`+`, `-`]: /documentation/operators/numeric#unary-operators
-  [`/`]: /documentation/operators/string#unary-operators
-  [`*`, `/`, and `%` operators]: /documentation/operators/numeric
-  [`+` and `-` operators]: /documentation/operators/numeric
-  [`>`, `>=`, `<` and `<=` operators]: /documentation/operators/relational
-  [`==` and `!=` operators]: /documentation/operators/equality
-  [`and` operator]: /documentation/operators/boolean
-  [`or` operator]: /documentation/operators/boolean
-  [`=` operator]: #single-equals
-{% endmarkdown %}
-
-{% codeExample 'operators', false %}
-  @debug 1 + 2 * 3 == 1 + (2 * 3); // true
-  @debug true or false and false == true or (false and false); // true
-  ===
-  @debug 1 + 2 * 3 == 1 + (2 * 3)  // true
-  @debug true or false and false == true or (false and false)  // true
-{% endcodeExample %}
-
-{% markdown %}
-  ### Parentheses
-
-  You can explicitly control the order of operations using parentheses. An
-  operation inside parentheses is always evaluated before any operations outside
-  of them. Parentheses can even be nested, in which case the innermost
-  parentheses will be evaluated first.
-{% endmarkdown %}
-
-{% codeExample 'parentheses', false %}
-  @debug (1 + 2) * 3; // 9
-  @debug ((1 + 2) * 3 + 4) * 5; // 65
-  ===
-  @debug (1 + 2) * 3  // 9
-  @debug ((1 + 2) * 3 + 4) * 5  // 65
-{% endcodeExample %}
-
-{% markdown %}
-  ## Single Equals
-
-  Sass supports a special `=` operator that's only allowed in function
-  arguments, which just creates an [unquoted string][] with its two operands
-  separated by `=`. This exists for backwards-compatibility with very old
-  IE-only syntax.
-
-  [unquoted string]: /documentation/values/strings#unquoted
-{% endmarkdown %}
-
-{% codeExample 'single-equals' %}
-  .transparent-blue {
-    filter: chroma(color=#0000ff);
-  }
-  ===
-  .transparent-blue
-    filter: chroma(color=#0000ff)
-{% endcodeExample %}
diff --git a/source/documentation/operators/index.md b/source/documentation/operators/index.md
new file mode 100644
index 0000000..6a2ff2f
--- /dev/null
+++ b/source/documentation/operators/index.md
@@ -0,0 +1,92 @@
+---
+title: Operators
+introduction: >
+  Sass supports a handful of useful `operators` for working with different
+  values. These include the standard mathematical operators like `+` and `*`, as
+  well as operators for various other types:
+---
+
+{% render 'doc_snippets/operator-list', parens: false %}
+
+{% headsUp %}
+  Early on in Sass's history, it added support for mathematical operations on
+  [colors][]. These operations operated on each of the colors' RGB channels
+  separately, so adding two colors would produce a color with the sum of their
+  red channels as its red channel and so on.
+
+  [colors]: /documentation/values/colors
+
+  This behavior wasn't very useful, since it channel-by-channel RGB arithmetic
+  didn't correspond well to how humans perceive color. [Color functions][] were
+  added which are much more useful, and color operations were deprecated.
+  They're still supported in LibSass and Ruby Sass, but they'll produce warnings
+  and users are strongly encouraged to avoid them.
+
+  [Color functions]: /documentation/modules/color
+{% endheadsUp %}
+
+## Order of Operations
+
+Sass has a pretty standard [order of operations][], from tightest to loosest:
+
+[order of operations]: https://en.wikipedia.org/wiki/Order_of_operations#Programming_languages
+
+1. The unary operators [`not`][], [`+`, `-`][], and [`/`][].
+2. The [`*`, `/`, and `%` operators][].
+3. The [`+` and `-` operators][].
+4. The [`>`, `>=`, `<` and `<=` operators][].
+5. The [`==` and `!=` operators][].
+6. The [`and` operator][].
+7. The [`or` operator][].
+8. The [`=` operator][], when it's available.
+
+[`not`]: /documentation/operators/boolean
+[`+`, `-`]: /documentation/operators/numeric#unary-operators
+[`/`]: /documentation/operators/string#unary-operators
+[`*`, `/`, and `%` operators]: /documentation/operators/numeric
+[`+` and `-` operators]: /documentation/operators/numeric
+[`>`, `>=`, `<` and `<=` operators]: /documentation/operators/relational
+[`==` and `!=` operators]: /documentation/operators/equality
+[`and` operator]: /documentation/operators/boolean
+[`or` operator]: /documentation/operators/boolean
+[`=` operator]: #single-equals
+
+{% codeExample 'operators', false %}
+  @debug 1 + 2 * 3 == 1 + (2 * 3); // true
+  @debug true or false and false == true or (false and false); // true
+  ===
+  @debug 1 + 2 * 3 == 1 + (2 * 3)  // true
+  @debug true or false and false == true or (false and false)  // true
+{% endcodeExample %}
+
+### Parentheses
+
+You can explicitly control the order of operations using parentheses. An
+operation inside parentheses is always evaluated before any operations outside
+of them. Parentheses can even be nested, in which case the innermost parentheses
+will be evaluated first.
+
+{% codeExample 'parentheses', false %}
+  @debug (1 + 2) * 3; // 9
+  @debug ((1 + 2) * 3 + 4) * 5; // 65
+  ===
+  @debug (1 + 2) * 3  // 9
+  @debug ((1 + 2) * 3 + 4) * 5  // 65
+{% endcodeExample %}
+
+## Single Equals
+
+Sass supports a special `=` operator that's only allowed in function arguments,
+which just creates an [unquoted string][] with its two operands separated by
+`=`. This exists for backwards-compatibility with very old IE-only syntax.
+
+[unquoted string]: /documentation/values/strings#unquoted
+
+{% codeExample 'single-equals' %}
+  .transparent-blue {
+    filter: chroma(color=#0000ff);
+  }
+  ===
+  .transparent-blue
+    filter: chroma(color=#0000ff)
+{% endcodeExample %}
diff --git a/source/documentation/operators/numeric.liquid b/source/documentation/operators/numeric.liquid
deleted file mode 100644
index fe6c092..0000000
--- a/source/documentation/operators/numeric.liquid
+++ /dev/null
@@ -1,205 +0,0 @@
----
-title: Numeric Operators
-table_of_contents: true
-introduction: >
-  Sass supports the standard set of mathematical operators for
-  [numbers](/documentation/values/numbers). They automatically convert between
-  compatible units.
----
-
-{% markdown %}
-  * `<expression> + <expression>` adds the first [expression][]'s value to the
-    second's.
-  * `<expression> - <expression>` subtracts the first [expression][]'s value
-    from the second's.
-  * `<expression> * <expression>` multiplies the first [expression][]'s value by
-    the second's.
-  * `<expression> % <expression>` returns the remainder of the first
-    [expression][]'s value divided by the second's. This is known as the
-    [*modulo* operator][].
-
-  [expression]: /documentation/syntax/structure#expressions
-  [*modulo* operator]: https://en.wikipedia.org/wiki/Modulo_operation
-{% endmarkdown %}
-
-{% codeExample 'numeric', false %}
-  @debug 10s + 15s; // 25s
-  @debug 1in - 10px; // 0.8958333333in
-  @debug 5px * 3px; // 15px*px
-  @debug 1in % 9px; // 0.0625in
-  ===
-  @debug 10s + 15s  // 25s
-  @debug 1in - 10px  // 0.8958333333in
-  @debug 5px * 3px  // 15px*px
-  @debug 1in % 9px  // 0.0625in
-{% endcodeExample %}
-
-{% markdown %}
-  Unitless numbers can be used with numbers of any unit.
-{% endmarkdown %}
-
-{% codeExample 'unitless-numbers', false %}
-  @debug 100px + 50; // 150px
-  @debug 4s * 10; // 40s
-  ===
-  @debug 100px + 50  // 150px
-  @debug 4s * 10  // 40s
-{% endcodeExample %}
-
-{% markdown %}
-  Numbers with incompatible units can't be used with addition, subtraction, or
-  modulo.
-{% endmarkdown %}
-
-{% codeExample 'incompatible-units', false %}
-  @debug 100px + 10s;
-  //     ^^^^^^^^^^^
-  // Error: Incompatible units px and s.
-  ===
-  @debug 100px + 10s
-  //     ^^^^^^^^^^^
-  // Error: Incompatible units px and s.
-{% endcodeExample %}
-
-{% markdown %}
-  ## Unary Operators
-
-  You can also write `+` and `-` as unary operators, which take only one value:
-
-  * `+<expression>` returns the expression's value without changing it.
-  * `-<expression>` returns the negative version of the expression's value.
-{% endmarkdown %}
-
-{% codeExample 'unary-operators', false %}
-  @debug +(5s + 7s); // 12s
-  @debug -(50px + 30px); // -80px
-  @debug -(10px - 15px); // 5px
-  ===
-  @debug +(5s + 7s)  // 12s
-  @debug -(50px + 30px)  // -80px
-  @debug -(10px - 15px)  // 5px
-{% endcodeExample %}
-
-{% headsUp, false %}
-  {% markdown %}
-    Because `-` can refer to both subtraction and unary negation, it can be
-    confusing which is which in a space-separated list. To be safe:
-
-    * Always write spaces on both sides of `-` when subtracting.
-    * Write a space before `-` but not after for a negative number or a unary
-      negation.
-    * Wrap unary negation in parentheses if it's in a space-separated list.
-
-    The different meanings of `-` in Sass take precedence in the following
-    order:
-
-    1. `-` as part of an identifier. The only exception are units; Sass normally
-      allows any valid identifier to be used as an identifier, but units may not
-      contain a hyphen followed by a digit.
-    2. `-` between an expression and a literal number with no whitespace, which
-      is parsed as subtraction.
-    3. `-` at the beginning of a literal number, which is parsed as a negative
-      number.
-    4. `-` between two numbers regardless of whitespace, which is parsed as
-      subtraction.
-    5. `-` before a value other than a literal number, which is parsed as unary
-      negation.
-  {% endmarkdown %}
-
-  {% codeExample 'heads-up-subtraction-unary-negation', false %}
-    @debug a-1; // a-1
-    @debug 5px-3px; // 2px
-    @debug 5-3; // 2
-    @debug 1 -2 3; // 1 -2 3
-
-    $number: 2;
-    @debug 1 -$number 3; // -1 3
-    @debug 1 (-$number) 3; // 1 -2 3
-    ===
-    @debug a-1  // a-1
-    @debug 5px-3px  // 2px
-    @debug 5-3  // 2
-    @debug 1 -2 3  // 1 -2 3
-
-    $number: 2
-    @debug 1 -$number 3  // -1 3
-    @debug 1 (-$number) 3  // 1 -2 3
-  {% endcodeExample %}
-{% endheadsUp %}
-
-{% markdown %}
-  ## Division
-
-  {% compatibility 'dart: "1.33.0"', 'libsass: false', 'ruby: false', 'feature: "math.div()"' %}{% endcompatibility %}
-
-  Unlike other mathematical operations, division in Sass is done with the
-  [`math.div()`] function. Although many programming languages use `/` as a
-  division operator, in CSS `/` is used as a separator (as in `font: 15px/32px`
-  or `hsl(120 100% 50% / 0.8)`). While Sass does support the use of `/` as a
-  division operator, this is deprecated and [will be removed] in a future
-  version.
-
-  [`math.div()`]: /documentation/modules/math#div
-  [will be removed]: /documentation/breaking-changes/slash-div
-
-  ### Slash-Separated Values
-
-  For the time being while Sass still supports `/` as a division operator, it
-  has to have a way to disambiguate between `/` as a separator and `/` as
-  division. In order to make this work, if two numbers are separated by `/`,
-  Sass will print the result as slash-separated instead of divided unless one of
-  these conditions is met:
-
-  * Either expression is anything other than a literal number.
-  * The result is stored in a variable or returned by a function.
-  * The operation is surrounded by parentheses, unless those parentheses are
-    outside a list that contains the operation.
-  * The result is used as part of another operation (other than `/`).
-  * The result is returned by a [calculation].
-
-  [calculation]: /documentation/values/calculations
-
-  You can use [`list.slash()`] to force `/` to be used as a separator.
-
-  [`list.slash()`]: /documentation/modules/list#slash
-{% endmarkdown %}
-
-{% codeExample 'slash-separated-values', false %}
-  @use "sass:list";
-
-  @debug 15px / 30px; // 15px/30px
-  @debug (10px + 5px) / 30px; // 0.5
-  @debug list.slash(10px + 5px, 30px); // 15px/30px
-
-  $result: 15px / 30px;
-  @debug $result; // 0.5
-
-  @function fifteen-divided-by-thirty() {
-    @return 15px / 30px;
-  }
-  @debug fifteen-divided-by-thirty(); // 0.5
-
-  @debug (15px/30px); // 0.5
-  @debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
-  @debug 15px/30px + 1; // 1.5
-  ===
-  @use "sass:list";
-
-  @debug 15px / 30px  // 15px/30px
-  @debug (10px + 5px) / 30px  // 0.5
-  @debug list.slash(10px + 5px, 30px)  // 15px/30px
-
-  $result: 15px / 30px
-  @debug $result  // 0.5
-
-  @function fifteen-divided-by-thirty()
-    @return 15px / 30px
-
-  @debug fifteen-divided-by-thirty()  // 0.5
-
-  @debug (15px/30px)  // 0.5
-  @debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
-  @debug 15px/30px + 1  // 1.5
-{% endcodeExample %}
-
-{% render 'doc_snippets/number-units' %}
diff --git a/source/documentation/operators/numeric.md b/source/documentation/operators/numeric.md
new file mode 100644
index 0000000..04751c7
--- /dev/null
+++ b/source/documentation/operators/numeric.md
@@ -0,0 +1,191 @@
+---
+title: Numeric Operators
+table_of_contents: true
+introduction: >
+  Sass supports the standard set of mathematical operators for
+  [numbers](/documentation/values/numbers). They automatically convert between
+  compatible units.
+---
+
+* `<expression> + <expression>` adds the first [expression][]'s value to the
+  second's.
+* `<expression> - <expression>` subtracts the first [expression][]'s value from
+  the second's.
+* `<expression> * <expression>` multiplies the first [expression][]'s value by
+  the second's.
+* `<expression> % <expression>` returns the remainder of the first
+  [expression][]'s value divided by the second's. This is known as the [*modulo*
+  operator][].
+
+[expression]: /documentation/syntax/structure#expressions
+[*modulo* operator]: https://en.wikipedia.org/wiki/Modulo_operation
+
+{% codeExample 'numeric', false %}
+  @debug 10s + 15s; // 25s
+  @debug 1in - 10px; // 0.8958333333in
+  @debug 5px * 3px; // 15px*px
+  @debug 1in % 9px; // 0.0625in
+  ===
+  @debug 10s + 15s  // 25s
+  @debug 1in - 10px  // 0.8958333333in
+  @debug 5px * 3px  // 15px*px
+  @debug 1in % 9px  // 0.0625in
+{% endcodeExample %}
+
+Unitless numbers can be used with numbers of any unit.
+
+{% codeExample 'unitless-numbers', false %}
+  @debug 100px + 50; // 150px
+  @debug 4s * 10; // 40s
+  ===
+  @debug 100px + 50  // 150px
+  @debug 4s * 10  // 40s
+{% endcodeExample %}
+
+Numbers with incompatible units can't be used with addition, subtraction, or
+modulo.
+
+{% codeExample 'incompatible-units', false %}
+  @debug 100px + 10s;
+  //     ^^^^^^^^^^^
+  // Error: Incompatible units px and s.
+  ===
+  @debug 100px + 10s
+  //     ^^^^^^^^^^^
+  // Error: Incompatible units px and s.
+{% endcodeExample %}
+
+## Unary Operators
+
+You can also write `+` and `-` as unary operators, which take only one value:
+
+* `+<expression>` returns the expression's value without changing it.
+* `-<expression>` returns the negative version of the expression's value.
+
+{% codeExample 'unary-operators', false %}
+  @debug +(5s + 7s); // 12s
+  @debug -(50px + 30px); // -80px
+  @debug -(10px - 15px); // 5px
+  ===
+  @debug +(5s + 7s)  // 12s
+  @debug -(50px + 30px)  // -80px
+  @debug -(10px - 15px)  // 5px
+{% endcodeExample %}
+
+{% headsUp %}
+  Because `-` can refer to both subtraction and unary negation, it can be
+  confusing which is which in a space-separated list. To be safe:
+
+  * Always write spaces on both sides of `-` when subtracting.
+  * Write a space before `-` but not after for a negative number or a unary
+    negation.
+  * Wrap unary negation in parentheses if it's in a space-separated list.
+
+  The different meanings of `-` in Sass take precedence in the following order:
+
+  1. `-` as part of an identifier. The only exception are units; Sass normally
+    allows any valid identifier to be used as an identifier, but units may not
+    contain a hyphen followed by a digit.
+  2. `-` between an expression and a literal number with no whitespace, which is
+    parsed as subtraction.
+  3. `-` at the beginning of a literal number, which is parsed as a negative
+    number.
+  4. `-` between two numbers regardless of whitespace, which is parsed as
+    subtraction.
+  5. `-` before a value other than a literal number, which is parsed as unary
+    negation.
+
+  {% codeExample 'heads-up-subtraction-unary-negation', false %}
+    @debug a-1; // a-1
+    @debug 5px-3px; // 2px
+    @debug 5-3; // 2
+    @debug 1 -2 3; // 1 -2 3
+
+    $number: 2;
+    @debug 1 -$number 3; // -1 3
+    @debug 1 (-$number) 3; // 1 -2 3
+    ===
+    @debug a-1  // a-1
+    @debug 5px-3px  // 2px
+    @debug 5-3  // 2
+    @debug 1 -2 3  // 1 -2 3
+
+    $number: 2
+    @debug 1 -$number 3  // -1 3
+    @debug 1 (-$number) 3  // 1 -2 3
+  {% endcodeExample %}
+{% endheadsUp %}
+
+## Division
+
+{% compatibility 'dart: "1.33.0"', 'libsass: false', 'ruby: false', 'feature: "math.div()"' %}{% endcompatibility %}
+
+Unlike other mathematical operations, division in Sass is done with the
+[`math.div()`] function. Although many programming languages use `/` as a
+division operator, in CSS `/` is used as a separator (as in `font: 15px/32px` or
+`hsl(120 100% 50% / 0.8)`). While Sass does support the use of `/` as a division
+operator, this is deprecated and [will be removed] in a future version.
+
+[`math.div()`]: /documentation/modules/math#div
+[will be removed]: /documentation/breaking-changes/slash-div
+
+### Slash-Separated Values
+
+For the time being while Sass still supports `/` as a division operator, it has
+to have a way to disambiguate between `/` as a separator and `/` as division. In
+order to make this work, if two numbers are separated by `/`, Sass will print
+the result as slash-separated instead of divided unless one of these conditions
+is met:
+
+* Either expression is anything other than a literal number.
+* The result is stored in a variable or returned by a function.
+* The operation is surrounded by parentheses, unless those parentheses are
+  outside a list that contains the operation.
+* The result is used as part of another operation (other than `/`).
+* The result is returned by a [calculation].
+
+[calculation]: /documentation/values/calculations
+
+You can use [`list.slash()`] to force `/` to be used as a separator.
+
+[`list.slash()`]: /documentation/modules/list#slash
+
+{% codeExample 'slash-separated-values', false %}
+  @use "sass:list";
+
+  @debug 15px / 30px; // 15px/30px
+  @debug (10px + 5px) / 30px; // 0.5
+  @debug list.slash(10px + 5px, 30px); // 15px/30px
+
+  $result: 15px / 30px;
+  @debug $result; // 0.5
+
+  @function fifteen-divided-by-thirty() {
+    @return 15px / 30px;
+  }
+  @debug fifteen-divided-by-thirty(); // 0.5
+
+  @debug (15px/30px); // 0.5
+  @debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
+  @debug 15px/30px + 1; // 1.5
+  ===
+  @use "sass:list";
+
+  @debug 15px / 30px  // 15px/30px
+  @debug (10px + 5px) / 30px  // 0.5
+  @debug list.slash(10px + 5px, 30px)  // 15px/30px
+
+  $result: 15px / 30px
+  @debug $result  // 0.5
+
+  @function fifteen-divided-by-thirty()
+    @return 15px / 30px
+
+  @debug fifteen-divided-by-thirty()  // 0.5
+
+  @debug (15px/30px)  // 0.5
+  @debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
+  @debug 15px/30px + 1  // 1.5
+{% endcodeExample %}
+
+{% render 'doc_snippets/number-units' %}
diff --git a/source/documentation/operators/relational.liquid b/source/documentation/operators/relational.md
similarity index 54%
rename from source/documentation/operators/relational.liquid
rename to source/documentation/operators/relational.md
index a0c595b..d52187f 100644
--- a/source/documentation/operators/relational.liquid
+++ b/source/documentation/operators/relational.md
@@ -6,18 +6,16 @@ introduction: >
   another. They automatically convert between compatible units.
 ---
 
-{% markdown %}
-  * `<expression> < <expression>` returns whether the first [expression][]'s
-    value is less than the second's.
-  * `<expression> <= <expression>` returns whether the first [expression][]'s
-    value is less than or equal to the second's.
-  * `<expression> > <expression>` returns whether the first [expression][]'s
-    value is greater than to the second's.
-  * `<expression> >= <expression>`, returns whether the first [expression][]'s
-    value is greater than or equal to the second's.
+* `<expression> < <expression>` returns whether the first [expression][]'s value
+  is less than the second's.
+* `<expression> <= <expression>` returns whether the first [expression][]'s
+  value is less than or equal to the second's.
+* `<expression> > <expression>` returns whether the first [expression][]'s value
+  is greater than to the second's.
+* `<expression> >= <expression>`, returns whether the first [expression][]'s
+  value is greater than or equal to the second's.
 
-  [expression]: /documentation/syntax/structure#expressions
-{% endmarkdown %}
+[expression]: /documentation/syntax/structure#expressions
 
 {% codeExample 'relational', false %}
   @debug 100 > 50; // true
@@ -31,10 +29,8 @@ introduction: >
   @debug 1000ms <= 1s  // true
 {% endcodeExample %}
 
-{% markdown %}
-  Unitless numbers can be compared with any number. They're automatically
-  converted to that number's unit.
-{% endmarkdown %}
+Unitless numbers can be compared with any number. They're automatically
+converted to that number's unit.
 
 {% codeExample 'unitless-numbers', false %}
   @debug 100 > 50px; // true
@@ -44,9 +40,7 @@ introduction: >
   @debug 10px < 17  // true
 {% endcodeExample %}
 
-{% markdown %}
-  Numbers with incompatible units can't be compared.
-{% endmarkdown %}
+Numbers with incompatible units can't be compared.
 
 {% codeExample 'incompatible-units', false %}
   @debug 100px > 10s;
diff --git a/source/documentation/operators/string.liquid b/source/documentation/operators/string.liquid
deleted file mode 100644
index 463be42..0000000
--- a/source/documentation/operators/string.liquid
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: String Operators
-introduction: >
-  Sass supports a few operators that generate
-  [strings](/documentation/values/strings):
----
-
-{% markdown %}
-  * `<expression> + <expression>` returns a string that contains both
-    expressions' values. If the either value is a [quoted string][], the result
-    will be quoted; otherwise, it will be unquoted.
-
-  * `<expression> - <expression>` returns an unquoted string that contains both
-    expressions' values, separated by `-`. This is a legacy operator, and
-    [interpolation][] should generally be used instead.
-
-  [quoted string]: /documentation/values/strings#quoted
-  [interpolation]: /documentation/interpolation
-{% endmarkdown %}
-
-{% codeExample 'string', false %}
-  @debug "Helvetica" + " Neue"; // "Helvetica Neue"
-  @debug sans- + serif; // sans-serif
-  @debug sans - serif; // sans-serif
-  ===
-  @debug "Helvetica" + " Neue"  // "Helvetica Neue"
-  @debug sans- + serif  // sans-serif
-  @debug sans - serif  // sans-serif
-{% endcodeExample %}
-
-{% markdown %}
-  These operators don't just work for strings! They can be used with any values
-  that can be written to CSS, with a few exceptions:
-
-  * Numbers can't be used as the left-hand value, because they have [their own
-    operators][numeric].
-  * Colors can't be used as the left-hand value, because they used to have
-    [their own operators][color].
-
-  [numeric]: /documentation/operators/numeric
-  [color]: /documentation/operators
-{% endmarkdown %}
-
-{% codeExample 'string-exceptions', false %}
-  @debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
-  @debug true + " is a boolean value"; // "true is a boolean value";
-  ===
-  @debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
-  @debug true + " is a boolean value"  // "true is a boolean value";
-{% endcodeExample %}
-
-{% headsUp %}
-  It's often cleaner and clearer to use [interpolation][] to create strings,
-  rather than relying on these operators.
-
-  [interpolation]: /documentation/interpolation
-{% endheadsUp %}
-
-{% markdown %}
-  ## Unary Operators
-
-  For historical reasons, Sass also supports `/` and `-` as a unary operators
-  which take only one value:
-
-  * `/<expression>` returns an unquoted string starting with `/` and followed by
-    the expression's value.
-  * `-<expression>` returns an unquoted string starting with `-` and followed by
-    the expression's value.
-{% endmarkdown %}
-
-{% codeExample 'unary-operators', false %}
-  @debug / 15px; // /15px
-  @debug - moz; // -moz
-  ===
-  @debug / 15px  // /15px
-  @debug - moz  // -moz
-{% endcodeExample %}
diff --git a/source/documentation/operators/string.md b/source/documentation/operators/string.md
new file mode 100644
index 0000000..ccaabf1
--- /dev/null
+++ b/source/documentation/operators/string.md
@@ -0,0 +1,71 @@
+---
+title: String Operators
+introduction: >
+  Sass supports a few operators that generate
+  [strings](/documentation/values/strings):
+---
+
+* `<expression> + <expression>` returns a string that contains both expressions'
+  values. If the either value is a [quoted string][], the result will be quoted;
+  otherwise, it will be unquoted.
+
+* `<expression> - <expression>` returns an unquoted string that contains both
+  expressions' values, separated by `-`. This is a legacy operator, and
+  [interpolation][] should generally be used instead.
+
+[quoted string]: /documentation/values/strings#quoted
+[interpolation]: /documentation/interpolation
+
+{% codeExample 'string', false %}
+  @debug "Helvetica" + " Neue"; // "Helvetica Neue"
+  @debug sans- + serif; // sans-serif
+  @debug sans - serif; // sans-serif
+  ===
+  @debug "Helvetica" + " Neue"  // "Helvetica Neue"
+  @debug sans- + serif  // sans-serif
+  @debug sans - serif  // sans-serif
+{% endcodeExample %}
+
+These operators don't just work for strings! They can be used with any values
+that can be written to CSS, with a few exceptions:
+
+* Numbers can't be used as the left-hand value, because they have [their own
+  operators][numeric].
+* Colors can't be used as the left-hand value, because they used to have [their
+  own operators][color].
+
+[numeric]: /documentation/operators/numeric
+[color]: /documentation/operators
+
+{% codeExample 'string-exceptions', false %}
+  @debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
+  @debug true + " is a boolean value"; // "true is a boolean value";
+  ===
+  @debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
+  @debug true + " is a boolean value"  // "true is a boolean value";
+{% endcodeExample %}
+
+{% headsUp %}
+  It's often cleaner and clearer to use [interpolation][] to create strings,
+  rather than relying on these operators.
+
+  [interpolation]: /documentation/interpolation
+{% endheadsUp %}
+
+## Unary Operators
+
+For historical reasons, Sass also supports `/` and `-` as a unary operators
+which take only one value:
+
+* `/<expression>` returns an unquoted string starting with `/` and followed by
+  the expression's value.
+* `-<expression>` returns an unquoted string starting with `-` and followed by
+  the expression's value.
+
+{% codeExample 'unary-operators', false %}
+  @debug / 15px; // /15px
+  @debug - moz; // -moz
+  ===
+  @debug / 15px  // /15px
+  @debug - moz  // -moz
+{% endcodeExample %}