:recycle: dubious tweaking of postcss files

src/App.vue

@@ -5,6 +5,8 @@ hello-world(msg="Hello Vue 3 + Vite")
 </template>
 
 <script>
+import * as sss from '@/sss/import.css'
+
 import { ref } from 'vue'
 
 import helloWorld from '@/components/HelloWorld.vue'
@@ -13,7 +15,7 @@ import card from '@/components/card.vue'
 export default {
     components: { card, helloWorld },
     setup() {
-        
+
         const cards = ref([
             { name: 'jwick' },
             { name: 'hwick' },
@@ -35,13 +37,7 @@ export default {
 </script>
 
 <style lang="postcss">
-@import './sss/partials/_reset.sss'
-@import './sss/partials/_ratios.sss'
-@import './sss/partials/_helpers.sss'
-@import './sss/partials/_typography.sss'
-
 @import './sss/theme.sss'
-@import './sss/variables.sss'
 
 #app
     -webkit-font-smoothing: antialiased

src/components/card.vue

@@ -5,7 +5,7 @@
 
     main.ph-1
         section
-            img(alt="Vue logo" style="width: 100%;" src="@/assets/logo.png")
+            img(alt="Vue logo" src="@/assets/logo.png").w-full
 
     footer.ph-1.b-1
         button(@click="state.count++").b-solid.rounded.p-0 {{ state.count }}
@@ -37,7 +37,6 @@ const close = e => {
 
 <style lang="postcss">
 @import '@/sss/theme.sss'
-@import '@/sss/variables.sss'
 
 .card
     height: $ms-8

src/sss/import.css

@@ -0,0 +1,4 @@
+@import './partials/_reset.sss'
+@import './partials/_ratios.sss'
+@import './partials/_helpers.sss'
+@import './partials/_typography.sss'

src/sss/partials/_helpers.sss

@@ -1,6 +1,12 @@
-@import '../variables.sss'
+@import '../_variables.sss'
 @import '../theme.sss'
 
+.w
+    &-full
+        width: 100%
+    &-half
+        width: 50%
+    
 /* Flex box  */
 %flexy
     display: flex
@@ -62,6 +68,12 @@
         background-color: $dark
     &-light
         background-color: $light
+    &-cover
+        background-size: cover
+    &-contain
+        background-size: contain
+    &-repeat
+        background-repeat: repeat
 
 /* Colors */
 .primary
@@ -175,4 +187,27 @@
         &-1
             margin-right: $ms-1
         &-2
-            margin-right: $ms-2
+            margin-right: $ms-2
+
+.z
+    &-bottom
+        position: relative
+        z-index: -1
+    &-10
+        position: relative
+        z-index: 10
+    &-20
+        position: relative
+        z-index: 20
+    &-30
+        position: relative
+        z-index: 30
+    &-40
+        position: relative
+        z-index: 40
+    &-50
+        position: relative
+        z-index: 50
+    &-top
+        position: relative
+        z-index: 10001

src/sss/partials/_reset.sss

@@ -1,4 +1,4 @@
-@import '../variables.sss'
+@import '../_variables.sss'
 @import '../theme.sss'
 
 *

src/sss/partials/_typography.sss

@@ -1,4 +1,4 @@
-@import '../variables.sss'
+@import '../_variables.sss'
 @import '../theme.sss'
 
 h1

src/sss/theme.sss

@@ -1,4 +1,4 @@
-@import './variables.sss'
+@import './_variables.sss'
 
 /**
   * Colors