Fix stylelint errors

Signed-off-by: Sora Morimoto <[email protected]>

Author: smorimoto

Diff for: .stylelintrc.json

@@ -1,22 +1,14 @@
 {
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-prettier"
-  ],
-  "plugins": [
-    "stylelint-order"
-  ],
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "plugins": ["stylelint-order"],
   "rules": {
     "at-rule-empty-line-before": null,
-    "at-rule-no-unknown": [true, {
-      "ignoreAtRules": [
-        "else",
-        "extends",
-        "if",
-        "include",
-        "mixin"
-      ]
-    }],
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["else", "extends", "if", "include", "mixin", "use"]
+      }
+    ],
     "declaration-empty-line-before": null,
     "order/properties-alphabetical-order": true
   }

Diff for: _sass/_grid.scss

@@ -1,33 +1,44 @@
+@use 'sass:math';
+
 .intro {
-  margin: 0 ($grid-gutter / -2) (2 * $grid-gutter);
-  [class*="g-col-"] {
-    padding: 0 $grid-gutter / 2;
+  margin: 0 math.div($grid-gutter, -2) (2 * $grid-gutter);
+
+  [class*='g-col-'] {
+    padding: 0 math.div($grid-gutter, 2);
   }
 }
+
 .g-row {
   @media (min-width: $bp-tablet) {
     display: flex;
     flex-direction: row;
+
     .flex-grow {
       flex-grow: 1;
     }
+
     .flex-shrink {
       flex-shrink: 1;
     }
+
     .g-col-2 {
       flex: 0 0 200px;
     }
+
     .g-col-3 {
-      flex: 0 0 percentage(3/12);
+      flex: 0 0 percentage(math.div(3, 12));
     }
+
     .g-col-4 {
-      flex: 0 0 percentage(4/12);
+      flex: 0 0 percentage(math.div(4, 12));
     }
+
     .g-col-8 {
-      flex: 0 0 percentage(8/12);
+      flex: 0 0 percentage(math.div(8, 12));
     }
+
     .g-col-10 {
-      flex: 0 0 percentage(10/12);
+      flex: 0 0 percentage(math.div(10, 12));
       flex-grow: 2;
     }
   }

Diff for: _sass/_layout.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 *,
 *::before,
 *::after {
@@ -10,7 +12,7 @@ html {
 
 body {
   background: $color-bg;
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   font-weight: $font-weight-regular;
   line-height: 1.5;
@@ -21,7 +23,7 @@ body {
 .container {
   margin: 0 auto;
   max-width: 1280px;
-  padding: 0 ($grid-gutter / 2);
+  padding: 0 math.div($grid-gutter, 2);
   width: 100%;
 }