♻️ #4 - refactor: refactor previous components sass files to use nest…

…ed syntax for BEM elements
maykinmedia · Jan 11, 2024 · 8a848f2 · 8a848f2
1 parent 30b240b
commit 8a848f2
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 75 deletions.
diff --git a/src/components/layout/column/column.scss b/src/components/layout/column/column.scss
@@ -2,32 +2,32 @@
 
 .mykn-column {
   grid-column: auto / 6 span;
-}
 
-.mykn-column--debug {
-  outline: 1px solid blue;
-}
+  &--debug {
+    outline: 1px solid blue;
+  }
 
-.mykn-column--debug:before {
-  color: blue;
-  content: "Mobile (full span)";
-  display: block;
-  font-family: monospace;
-  text-align: center;
-}
+  &--debug:before {
+    color: blue;
+    content: "Mobile (full span)";
+    display: block;
+    font-family: monospace;
+    text-align: center;
+  }
 
-.mykn-column--debug[data-testid]:before {
-  content: attr(data-testid)!important;
-}
+  &--debug[data-testid]:before {
+    content: attr(data-testid)!important;
+  }
 
-@media screen and (min-width: style.$breakpoint-desktop) {
-  @for $i from 1 through 12 {
-    .mykn-column--span-#{$i} {
-      grid-column: auto / span #{$i};
-    }
+  @media screen and (min-width: style.$breakpoint-desktop) {
+    @for $i from 1 through 12 {
+      &--span-#{$i} {
+        grid-column: auto / span #{$i};
+      }
 
-    .mykn-column--debug.mykn-column--span-#{$i}:before {
-      content: "Span #{$i}";
+      &--debug#{&}--span-#{$i}:before {
+        content: "Span #{$i}";
+      }
     }
   }
 }

diff --git a/src/components/layout/container/container.scss b/src/components/layout/container/container.scss
@@ -2,20 +2,20 @@
   margin: 0 auto;
   max-width: 1240px;
   width: 100%;
-}
 
-.mykn-container--debug {
-  outline: 1px solid red;
-}
+  &--debug {
+    outline: 1px solid red;
+  }
 
-.mykn-container--debug[data-testid]:before {
-  content: attr(data-testid);
-  color: red;
-  display: block;
-  font-family: monospace;
-  text-align: center;
-}
+  &--debug[data-testid]:before {
+    content: attr(data-testid);
+    color: red;
+    display: block;
+    font-family: monospace;
+    text-align: center;
+  }
 
-.mykn-container--debug[data-testid]:before {
-  content: attr(data-testid);
+  &--debug[data-testid]:before {
+    content: attr(data-testid);
+  }
 }
diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss
@@ -5,28 +5,28 @@
   grid-template-columns: repeat(6, auto);
   gap: 12px;
   width: 100%;
-}
 
-.mykn-grid--debug {
-  outline: 1px solid green;
-}
+  &--debug {
+    outline: 1px solid green;
+  }
 
-.mykn-grid--debug[data-testid]:before {
-  content: attr(data-testid);
-  color: green;
-  display: block;
-  font-family: monospace;
-  grid-column: 1 / 12 span;
-  text-align: center;
-}
+  &--debug[data-testid]:before {
+    content: attr(data-testid);
+    color: green;
+    display: block;
+    font-family: monospace;
+    grid-column: 1 / 12 span;
+    text-align: center;
+  }
 
-.mykn-grid--debug[data-testid]:before {
-  content: attr(data-testid);
-}
+  &--debug[data-testid]:before {
+    content: attr(data-testid);
+  }
 
-@media screen and (min-width: style.$breakpoint-desktop) {
-  .mykn-grid {
-    grid-template-columns: repeat(12, auto);
-    gap: 32px;
+  @media screen and (min-width: style.$breakpoint-desktop) {
+    & {
+      grid-template-columns: repeat(12, auto);
+      gap: 32px;
+    }
   }
 }
diff --git a/src/components/logo/logo.scss b/src/components/logo/logo.scss
@@ -1,28 +1,30 @@
-.mykn-logo .mykn-logo__image {
-  width: 100%;
-  object-fit: contain;
-  max-width: 155px;
-  overflow: visible;
-}
+.mykn-logo {
+  &__image {
+    width: 100%;
+    object-fit: contain;
+    max-width: 155px;
+    overflow: visible;
+  }
 
-.mykn-logo .mykn-logo__handle {
-  transition: transform var(--animation-duration) var(--animation-timing-function);
-}
+  & &__handle {
+    transition: transform var(--animation-duration) var(--animation-timing-function);
+  }
 
-.mykn-logo[href]:hover .mykn-logo__handle--left,
-.mykn-logo[href]:focus .mykn-logo__handle--left {
-  transform: translateX(-2px);
-}
+  &[href]:hover &__handle--left,
+  &[href]:focus &__handle--left {
+    transform: translateX(-2px);
+  }
 
-.mykn-logo[href]:active .mykn-logo__handle--left {
-  transform: translateX(2px);
-}
+  &[href]:active &__handle--left {
+    transform: translateX(2px);
+  }
 
-.mykn-logo[href]:hover .mykn-logo__handle--right,
-.mykn-logo[href]:focus .mykn-logo__handle--right {
-  transform: translateX(2px);
-}
+  &[href]:hover &__handle--right,
+  &[href]:focus &__handle--right {
+    transform: translateX(2px);
+  }
 
-.mykn-logo[href]:active .mykn-logo__handle--right {
-  transform: translateX(-2px);
+  &[href]:active &__handle--right {
+    transform: translateX(-2px);
+  }
 }