Fixed SCSS linter errors

.stylelintrc

@@ -20,8 +20,12 @@
         ],
         "ignoreAtRules": [
           "if",
+          "each",
           "else",
-          "elseif"
+          "elseif",
+          "for",
+          "import",
+          "return"
         ]
       }
     ],
@@ -47,16 +51,16 @@
       }
     ],
     "custom-property-empty-line-before": null,
-    "custom-property-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
+    "declaration-colon-space-after": null,
     "declaration-no-important": true,
     "declaration-block-single-line-max-declarations": 0,
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
     "font-family-name-quotes": "always-where-recommended",
     "font-weight-notation": "numeric",
-    "keyframes-name-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "linebreaks": "unix",
     "media-feature-name-no-unknown": null,
+    "no-descending-specificity": null,
     "no-empty-first-line": true,
     "no-unknown-animations": true,
     "property-no-unknown": null,
@@ -69,11 +73,11 @@
         ]
       }
     ],
+    "selector-combinator-space-before": null,
+    "selector-descendant-combinator-no-non-space": null,
     "selector-max-empty-lines": 0,
     "selector-max-id": 0,
-    "selector-max-type": 1,
-    "selector-max-universal": 1,
-    "selector-no-qualifying-type": true,
+    "selector-no-qualifying-type": null,
     "selector-pseudo-class-no-unknown": null,
     "selector-pseudo-element-no-unknown": null,
     "string-quotes": "double",
@@ -89,10 +93,8 @@
       "vh",
       "vw"
     ],
-    "value-no-vendor-prefix": true,
     "scss/at-each-key-value-single-line": true,
     "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
-    "scss/at-extend-no-missing-placeholder": true,
     "scss/at-function-parentheses-space-before": "never",
     "scss/at-function-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
@@ -103,7 +105,6 @@
     "scss/at-mixin-parentheses-space-before": "never",
     "scss/at-mixin-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "scss/at-rule-conditional-no-parentheses": true,
-    "scss/comment-no-empty": true,
     "scss/comment-no-loud": true,
     "scss/declaration-nested-properties": "never",
     "scss/dimension-no-non-numeric-values": true,
@@ -126,9 +127,6 @@
     "scss/dollar-variable-no-missing-interpolation": true,
     "scss/dollar-variable-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "scss/double-slash-comment-whitespace-inside": "always",
-    "scss/no-dollar-variables": true,
-    "scss/no-global-function-names": true,
-    "scss/no-duplicate-dollar-variables": true,
     "scss/no-duplicate-mixins": true,
     "scss/operator-no-unspaced": true,
     "scss/partial-no-import": true,

src/assets/stylesheets/_config.scss

@@ -39,4 +39,4 @@ $break-devices: (
     medium:    px2em(1600px) px2em(1999px),
     large:     px2em(2000px)
   )
-);
+) !default;

src/assets/stylesheets/main/_typeset.scss

@@ -317,7 +317,6 @@ kbd {
         content: attr(title);
       }
     }
-
   }
 
   // Small text
@@ -496,7 +495,7 @@ kbd {
     // Due to margin collapse because of the necessary inline-block hack, we
     // cannot increase the bottom margin on the table, so we just increase the
     // top margin on the following element
-    & + * {
+    + * {
       margin-top: 1.5em;
     }
 

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -47,9 +47,8 @@ $admonitions: (
 // Icon definitions
 :root {
   @each $names, $props in $admonitions {
-    --md-admonition-icon--#{nth($names, 1)}: svg-load(
-      "@mdi/svg/svg/#{nth($props, 1)}.svg"
-    );
+    --md-admonition-icon--#{nth($names, 1)}:
+      svg-load("@mdi/svg/svg/#{nth($props, 1)}.svg");
   }
 }
 

src/assets/stylesheets/main/extensions/markdown/_footnotes.scss

@@ -128,7 +128,7 @@
 
         // Flip icon vertically
         svg {
-          transform: scaleX(-1)
+          transform: scaleX(-1);
         }
       }
     }

src/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss

@@ -39,7 +39,7 @@
     // Arithmatex content
     > * {
       width: min-content;
-      margin: 1em auto !important;
+      margin: 1em auto !important; // stylelint-disable-line
       padding: 0 px2rem(16px);
       touch-action: auto;
     }

src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss

@@ -26,7 +26,6 @@
 
 // Code block
 .highlight {
-
   .o,   // Operator
   .ow { // Operator, word
     color: var(--md-code-hl-operator-color);
@@ -140,7 +139,7 @@
   }
 
   .gi { // Diff, insert
-    background-color: var(--md-typeset-ins-color)
+    background-color: var(--md-typeset-ins-color);
   }
 
   // Highlighted line
@@ -148,7 +147,7 @@
     display: block;
     margin: 0 px2em(-16px, 13.6px);
     padding: 0 px2em(16px, 13.6px);
-    background-color: var(--md-code-hl-color)
+    background-color: var(--md-code-hl-color);
   }
 
   // Code block line numbers (inline)

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -84,7 +84,7 @@
         border-color: var(--md-accent-fg-color);
 
         // Show tabbed block content
-        & + .tabbed-content {
+        + .tabbed-content {
           display: block;
         }
       }

src/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss

@@ -26,12 +26,10 @@
 
 // Icon definitions
 :root {
-  --md-tasklist-icon: svg-load(
-    "@primer/octicons/build/svg/check-circle-fill-24.svg"
-  );
-  --md-tasklist-icon--checked: svg-load(
-    "@primer/octicons/build/svg/check-circle-fill-24.svg"
-  );
+  --md-tasklist-icon:
+    svg-load("@primer/octicons/build/svg/check-circle-fill-24.svg");
+  --md-tasklist-icon--checked:
+    svg-load("@primer/octicons/build/svg/check-circle-fill-24.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/layout/_base.scss

@@ -38,7 +38,7 @@ html {
 
   // [screen medium +]: Set base `font-size` to `11px`
   @include break-from-device(screen medium) {
-    font-size: 137.50%;
+    font-size: 137.5%;
   }
 
   // [screen large +]: Set base `font-size` to `12px`

src/assets/stylesheets/main/layout/_header.scss

@@ -131,7 +131,7 @@
 
       // [no-js]: Hide button
       .no-js & {
-        display: none
+        display: none;
       }
 
       // Adjust for right-to-left languages
@@ -205,7 +205,7 @@
       }
 
       // Second header topic - title of the current page
-      & + .md-header-nav__topic {
+      + .md-header-nav__topic {
         z-index: 0;
         transform: translateX(0);
         opacity: 1;

src/assets/stylesheets/main/layout/_nav.scss

@@ -139,7 +139,7 @@
       }
 
       // Hide table of contents
-      & ~ .md-nav {
+      ~ .md-nav {
         display: none;
       }
     }
@@ -456,7 +456,7 @@
       }
 
       // Show table of contents
-      & ~ .md-nav {
+      ~ .md-nav {
         display: flex;
       }
     }
@@ -496,7 +496,7 @@
       }
 
       // Show table of contents
-      & ~ .md-nav {
+      ~ .md-nav {
         display: flex;
       }
     }

src/assets/stylesheets/main/layout/_search.scss

@@ -600,7 +600,7 @@
     }
 
     // Adjust transparency of less relevant results
-    & ~ * > * {
+    ~ * > * {
       opacity: 0.65;
     }
   }

src/assets/stylesheets/main/layout/_source.scss

@@ -29,6 +29,7 @@
   0% {
     height: 0;
   }
+
   100% {
     height: px2rem(13px);
   }
@@ -40,9 +41,11 @@
     transform: translateY(100%);
     opacity: 0;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     transform: translateY(0%);
     opacity: 1;

src/assets/stylesheets/overrides/_typeset.scss

@@ -26,10 +26,15 @@
 
 // Pumping heart animation
 @keyframes tx-heart {
-  0%, 40%, 80%, 100% {
+  0%,
+  40%,
+  80%,
+  100% {
     transform: scale(1);
   }
-  20%, 60% {
+
+  20%,
+  60% {
     transform: scale(1.15);
   }
 }
@@ -48,7 +53,7 @@
 
   // Twitter icon
   .twitter {
-    color: #00ACEE;
+    color: #00acee;
   }
 
   // Insiders video

src/assets/stylesheets/overrides/layout/_announce.scss

@@ -41,6 +41,6 @@
 
   // Twitter icon
   .twitter {
-    margin-left: .2em;
+    margin-left: 0.2em;
   }
 }

src/assets/stylesheets/utilities/_break.scss

@@ -64,7 +64,7 @@ $break-devices: () !default;
       @each $number in $value {
         @if type-of($number) == number {
           $min: min($number, $min);
-          @if $max != null {
+          @if $max {
             $max: max($number, $max);
           }
         } @else {
@@ -78,7 +78,7 @@ $break-devices: () !default;
       @error "Invalid value: #{$value}";
     }
   }
-  @returns $min, $max;
+  @return $min, $max;
 }
 
 ///
@@ -96,7 +96,7 @@ $break-devices: () !default;
   @if type-of($current) == list or type-of($current) == number {
     $current: (default: $current);
   }
-  @returns break-select-min-max($current);
+  @return break-select-min-max($current);
 }
 
 // ----------------------------------------------------------------------------
@@ -161,9 +161,10 @@ $break-devices: () !default;
   }
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
-    @if nth($breakpoint, 2) != null {
+    @if nth($breakpoint, 2) {
       $min: nth($breakpoint, 1);
       $max: nth($breakpoint, 2);
+
       @media screen and (min-width: $min) and (max-width: $max) {
         @content;
       }
@@ -185,6 +186,7 @@ $break-devices: () !default;
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
     $min: nth($breakpoint, 1);
+
     @media screen and (min-width: $min) {
       @content;
     }
@@ -203,6 +205,7 @@ $break-devices: () !default;
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
     $max: nth($breakpoint, 2);
+
     @media screen and (max-width: $max) {
       @content;
     }

src/assets/stylesheets/utilities/_convert.scss

@@ -52,7 +52,7 @@
 @function px2em($size, $base: 16px) {
   @if unit($size) == px {
     @if unit($base) == px {
-      @returns ($size / $base) * 1em;
+      @return ($size / $base) * 1em;
     } @else {
       @error "Invalid base: #{$base} - unit must be 'px'";
     }
@@ -67,7 +67,7 @@
 @function px2rem($size, $base: 20px) {
   @if unit($size) == px {
     @if unit($base) == px {
-      @returns ($size / $base) * 1.0rem;
+      @return ($size / $base) * 1rem;
     } @else {
       @error "Invalid base: #{$base} - unit must be 'px'";
     }