From 9aa1eeac3c3396583cd614f163b8b2a2ccb3e728 Mon Sep 17 00:00:00 2001
From: Bob van de Vijver <bobvandevijver@users.noreply.github.com>
Date: Mon, 12 Aug 2024 20:34:20 +0200
Subject: [PATCH] Fix Sass mixed declarations (#1495)

As requested (https://github.com/just-the-docs/just-the-docs/issues/1493#issuecomment-2227203330), a PR to resolve the Sass deprecations. Seems to solve all deprecations I am seeing, and I am not seeing any weird changes in the resulting CSS file.

Closes #1493.

<details>
<summary>Git diff of generated CSS file</summary>


```patch
diff --git a/just-the-docs-default.css b/just-the-docs-default.css.new
index fe42b2d..50a103b 100644
--- a/just-the-docs-default.css
+++ b/just-the-docs-default.css.new
@@ -591,9 +591,11 @@ template {
 }

 html {
-  font-size: 0.875rem !important;
   scroll-behavior: smooth;
 }
+html {
+  font-size: 0.875rem !important;
+}
 @media (min-width: 31.25rem) {
   html {
     font-size: 1rem !important;
@@ -715,25 +717,50 @@ blockquote {
     min-width: 16.5rem;
   }
 }
-
 @media (min-width: 50rem) {
-  .main {
-    position: relative;
-    max-width: 50rem;
+  .side-bar + .main {
     margin-left: 15.5rem;
   }
 }
 @media (min-width: 66.5rem) {
-  .main {
+  .side-bar + .main {
     margin-left: max(16.5rem, (100% - 66.5rem) / 2 + 16.5rem);
   }
 }
+.side-bar + .main .main-header {
+  display: none;
+  background-color: #f5f6fa;
+}
+@media (min-width: 50rem) {
+  .side-bar + .main .main-header {
+    display: flex;
+    background-color: #fff;
+  }
+}
+.side-bar + .main .main-header.nav-open {
+  display: block;
+}
+@media (min-width: 50rem) {
+  .side-bar + .main .main-header.nav-open {
+    display: flex;
+  }
+}
+
+.main {
+  margin: auto;
+}
+@media (min-width: 50rem) {
+  .main {
+    position: relative;
+    max-width: 50rem;
+  }
+}

 .main-content-wrap {
-  padding-right: 1rem;
-  padding-left: 1rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 @media (min-width: 50rem) {
   .main-content-wrap {
@@ -750,24 +777,13 @@ blockquote {

 .main-header {
   z-index: 0;
-  display: none;
-  background-color: #f5f6fa;
+  border-bottom: 1px solid #eeebee;
 }
 @media (min-width: 50rem) {
   .main-header {
     display: flex;
     justify-content: space-between;
     height: 3.75rem;
-    background-color: #fff;
-    border-bottom: 1px solid #eeebee;
-  }
-}
-.main-header.nav-open {
-  display: block;
-}
-@media (min-width: 50rem) {
-  .main-header.nav-open {
-    display: flex;
   }
 }

@@ -814,8 +830,6 @@ blockquote {
 }

 .site-title {
-  padding-right: 1rem;
-  padding-left: 1rem;
   flex-grow: 1;
   display: flex;
   height: 100%;
@@ -823,7 +837,8 @@ blockquote {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   color: #27262b;
-  font-size: 1.125rem !important;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 @media (min-width: 50rem) {
   .site-title {
@@ -831,6 +846,9 @@ blockquote {
     padding-left: 2rem;
   }
 }
+.site-title {
+  font-size: 1.125rem !important;
+}
 @media (min-width: 31.25rem) {
   .site-title {
     font-size: 1.5rem !important;
@@ -877,15 +895,14 @@ body {
 }

 .site-footer {
-  padding-right: 1rem;
-  padding-left: 1rem;
   position: absolute;
   bottom: 0;
   left: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
   color: #959396;
-  font-size: 0.6875rem !important;
+  padding-right: 1rem;
+  padding-left: 1rem;
 }
 @media (min-width: 50rem) {
   .site-footer {
@@ -893,6 +910,9 @@ body {
     padding-left: 2rem;
   }
 }
+.site-footer {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   .site-footer {
     font-size: 0.75rem !important;
@@ -948,6 +968,8 @@ body {
   color: #959396;
   content: counter(step-counter);
   counter-increment: step-counter;
+}
+.main-content ol > li::before {
   font-size: 0.75rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1150,10 +1172,12 @@ body {
   list-style: none;
 }
 .nav-list .nav-list-item {
-  font-size: 0.875rem !important;
   position: relative;
   margin: 0;
 }
+.nav-list .nav-list-item {
+  font-size: 0.875rem !important;
+}
 @media (min-width: 31.25rem) {
   .nav-list .nav-list-item {
     font-size: 1rem !important;
@@ -1246,6 +1270,8 @@ body {
   text-align: start;
   text-transform: uppercase;
   border-bottom: 1px solid #eeebee;
+}
+.nav-category {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1280,6 +1306,8 @@ body {
 .aux-nav {
   height: 100%;
   overflow-x: auto;
+}
+.aux-nav {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1320,6 +1348,8 @@ body {

 .breadcrumb-nav-list-item {
   display: table-cell;
+}
+.breadcrumb-nav-list-item {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1341,11 +1371,14 @@ body {
   content: "";
 }

+h1,
+.text-alpha {
+  font-weight: 300;
+}
 h1,
 .text-alpha {
   font-size: 2rem !important;
   line-height: 1.25;
-  font-weight: 300;
 }
 @media (min-width: 31.25rem) {
   h1,
@@ -1381,11 +1414,14 @@ h3,

 h4,
 .text-delta {
-  font-size: 0.6875rem !important;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
+h4,
+.text-delta {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   h4,
   .text-delta {
@@ -1454,9 +1490,12 @@ h6,
   text-transform: uppercase;
   vertical-align: middle;
   background-color: #2869e6;
-  font-size: 0.6875rem !important;
   border-radius: 12px;
 }
+.label:not(g),
+.label-blue:not(g) {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   .label:not(g),
   .label-blue:not(g) {
@@ -1752,6 +1791,8 @@ h6,
   padding-left: 0;
   margin-bottom: 0.25rem;
   list-style: none;
+}
+.search-results-list {
   font-size: 0.875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1804,6 +1845,8 @@ h6,
 }
 .search-result-doc.search-result-doc-parent {
   opacity: 0.5;
+}
+.search-result-doc.search-result-doc-parent {
   font-size: 0.75rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1844,6 +1887,8 @@ h6,
   color: #959396;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+.search-result-rel-url {
   font-size: 0.5625rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1862,6 +1907,8 @@ h6,
   word-wrap: break-word;
   border-left: 1px solid;
   border-left-color: #eeebee;
+}
+.search-result-previews {
   font-size: 0.6875rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1889,6 +1936,8 @@ h6,

 .search-no-result {
   padding: 0.5rem 0.75rem;
+}
+.search-no-result {
   font-size: 0.75rem !important;
 }
 @media (min-width: 31.25rem) {
@@ -1998,13 +2047,16 @@ table {

 th,
 td {
-  font-size: 0.75rem !important;
   min-width: 7.5rem;
   padding: 0.5rem 0.75rem;
   background-color: #fff;
   border-bottom: 1px solid rgba(238, 235, 238, 0.5);
   border-left: 1px solid #eeebee;
 }
+th,
+td {
+  font-size: 0.75rem !important;
+}
 @media (min-width: 31.25rem) {
   th,
   td {
@@ -2135,12 +2187,15 @@ figure.highlight :not(pre) > code {
 }
 .highlight .table-wrapper td,
 .highlight .table-wrapper pre {
-  font-size: 0.6875rem !important;
   min-width: 0;
   padding: 0;
   background-color: #f5f6fa;
   border: 0;
 }
+.highlight .table-wrapper td,
+.highlight .table-wrapper pre {
+  font-size: 0.6875rem !important;
+}
 @media (min-width: 31.25rem) {
   .highlight .table-wrapper td,
   .highlight .table-wrapper pre {
```
</details>
---
 CHANGELOG.md                          |  4 +++
 _sass/base.scss                       |  4 +--
 _sass/code.scss                       |  8 ++---
 _sass/labels.scss                     |  4 +--
 _sass/layout.scss                     | 14 ++++----
 _sass/navigation.scss                 |  4 +--
 _sass/support/mixins/_typography.scss | 48 +++++++++++++++++++--------
 _sass/tables.scss                     |  4 +--
 _sass/typography.scss                 |  8 ++---
 9 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 487c18c..e6d8cd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,12 +19,16 @@ Code changes to `main` that are *not* in the latest release:
 
 - Added: `nav_enabled` site, layout, and page-level variable to selectively show or hide the side/mobile menu by [@kevinlin1] in [#1441]. The minimal layout was reimplemented using this feature, and now has support for the site-wide search bar and auxiliary links.
 - Fixed: protect `search-data.json` file from front matter default for layout by [@mattxwang] in [#1468]
+- Fixed: Sass mixed declarations by [@bobvandevijver] in [#1495]
 
 Docs changes made since the latest release:
 
 - Docs: Explained the `nav_enabled` variables as an alternative to using the minimal layout [@kevinlin1] in [#1441].
 
+[@bobvandevijver]: https://github.com/bobvandevijver
+
 [#1468]: https://github.com/just-the-docs/just-the-docs/pull/1468
+[#1495]: https://github.com/just-the-docs/just-the-docs/pull/1495
 
 ## Release v0.8.2
 
diff --git a/_sass/base.scss b/_sass/base.scss
index 0068d71..afa67a4 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -10,9 +10,9 @@
 }
 
 html {
-  @include fs-4;
-
   scroll-behavior: smooth;
+
+  @include fs-4;
 }
 
 body {
diff --git a/_sass/code.scss b/_sass/code.scss
index d2a5ee1..df54f25 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -142,10 +142,10 @@ div.highlighter-rouge {
 
 // for AsciiDoc. we also need to fix the margins for its parent container.
 div.listingblock {
-  @include scroll-and-spacing("div.content", "div.content > pre");
-
   margin-top: 0;
   margin-bottom: $sp-3;
+
+  @include scroll-and-spacing("div.content", "div.content > pre");
 }
 
 // {% highlight LANG %}...{% endhighlight %},
@@ -176,12 +176,12 @@ figure.highlight {
 
   td,
   pre {
-    @include fs-2;
-
     min-width: 0;
     padding: 0;
     background-color: $code-background-color;
     border: 0;
+
+    @include fs-2;
   }
 
   td.gl {
diff --git a/_sass/labels.scss b/_sass/labels.scss
index 98cc8f9..fdf714e 100644
--- a/_sass/labels.scss
+++ b/_sass/labels.scss
@@ -14,9 +14,9 @@
   text-transform: uppercase;
   vertical-align: middle;
   background-color: $blue-100;
-  @include fs-2;
-
   border-radius: 12px;
+
+  @include fs-2;
 }
 
 .label-green:not(g) {
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 43ec5a5..4cc6ee4 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -65,11 +65,11 @@
 }
 
 .main-content-wrap {
-  @include container;
-
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
 
+  @include container;
+
   @include mq(md) {
     padding-top: $gutter-spacing;
     padding-bottom: $gutter-spacing;
@@ -126,8 +126,6 @@
 }
 
 .site-title {
-  @include container;
-
   flex-grow: 1;
   display: flex;
   height: 100%;
@@ -135,6 +133,9 @@
   padding-top: $sp-3;
   padding-bottom: $sp-3;
   color: $body-heading-color;
+
+  @include container;
+
   @include fs-6;
 
   @include mq(md) {
@@ -200,14 +201,15 @@ body {
 // stylelint-enable selector-max-type
 
 .site-footer {
-  @include container;
-
   position: absolute;
   bottom: 0;
   left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
   color: $grey-dk-000;
+
+  @include container;
+
   @include fs-2;
 
   @include mq(md) {
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 011a32e..a99d9dc 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -8,11 +8,11 @@
   list-style: none;
 
   .nav-list-item {
-    @include fs-4;
-
     position: relative;
     margin: 0;
 
+    @include fs-4;
+
     @include mq(md) {
       @include fs-3;
     }
diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss
index 5207fcd..760b0e9 100644
--- a/_sass/support/mixins/_typography.scss
+++ b/_sass/support/mixins/_typography.scss
@@ -1,5 +1,7 @@
 @mixin fs-1 {
-  font-size: $font-size-1 !important;
+  & {
+    font-size: $font-size-1 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-1-sm !important;
@@ -7,7 +9,9 @@
 }
 
 @mixin fs-2 {
-  font-size: $font-size-2 !important;
+  & {
+    font-size: $font-size-2 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-3 !important;
@@ -15,7 +19,9 @@
 }
 
 @mixin fs-3 {
-  font-size: $font-size-3 !important;
+  & {
+    font-size: $font-size-3 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-4 !important;
@@ -23,7 +29,9 @@
 }
 
 @mixin fs-4 {
-  font-size: $font-size-4 !important;
+  & {
+    font-size: $font-size-4 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-5 !important;
@@ -31,7 +39,9 @@
 }
 
 @mixin fs-5 {
-  font-size: $font-size-5 !important;
+  & {
+    font-size: $font-size-5 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-6 !important;
@@ -39,7 +49,9 @@
 }
 
 @mixin fs-6 {
-  font-size: $font-size-6 !important;
+  & {
+    font-size: $font-size-6 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-7 !important;
@@ -48,8 +60,10 @@
 }
 
 @mixin fs-7 {
-  font-size: $font-size-7 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-7 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-8 !important;
@@ -57,8 +71,10 @@
 }
 
 @mixin fs-8 {
-  font-size: $font-size-8 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-8 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-9 !important;
@@ -66,8 +82,10 @@
 }
 
 @mixin fs-9 {
-  font-size: $font-size-9 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-9 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-10 !important;
@@ -75,8 +93,10 @@
 }
 
 @mixin fs-10 {
-  font-size: $font-size-10 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-10 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-10-sm !important;
diff --git a/_sass/tables.scss b/_sass/tables.scss
index c5d8491..3574323 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -21,14 +21,14 @@ table {
 
 th,
 td {
-  @include fs-3;
-
   min-width: 7.5rem;
   padding: $sp-2 $sp-3;
   background-color: $table-background-color;
   border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
+  @include fs-3;
+
   &:first-of-type {
     border-left: 0;
   }
diff --git a/_sass/typography.scss b/_sass/typography.scss
index 441dcae..0d0eaf2 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -3,9 +3,9 @@
 
 h1,
 .text-alpha {
-  @include fs-8;
-
   font-weight: 300;
+
+  @include fs-8;
 }
 
 h2,
@@ -21,11 +21,11 @@ h3,
 
 h4,
 .text-delta {
-  @include fs-2;
-
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
+
+  @include fs-2;
 }
 
 h4 code {