:recycle: dubious tweaking of postcss files

src/App.vue

 </template>
 
 <script>
+import * as sss from '@/sss/import.css'
+
 import { ref } from 'vue'
 
 import helloWorld from '@/components/HelloWorld.vue'
 export default {
     components: { card, helloWorld },
     setup() {
-        
+
         const cards = ref([
             { name: 'jwick' },
             { name: 'hwick' },
 </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

 
     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 }}
 
 <style lang="postcss">
 @import '@/sss/theme.sss'
-@import '@/sss/variables.sss'
 
 .card
     height: $ms-8

src/sss/import.css

+@import './partials/_reset.sss'
+@import './partials/_ratios.sss'
+@import './partials/_helpers.sss'
+@import './partials/_typography.sss'

src/sss/partials/_helpers.sss

-@import '../variables.sss'
+@import '../_variables.sss'
 @import '../theme.sss'
 
+.w
+    &-full
+        width: 100%
+    &-half
+        width: 50%
+    
 /* Flex box  */
 %flexy
     display: flex
         background-color: $dark
     &-light
         background-color: $light
+    &-cover
+        background-size: cover
+    &-contain
+        background-size: contain
+    &-repeat
+        background-repeat: repeat
 
 /* Colors */
 .primary
         &-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

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

src/sss/partials/_typography.sss

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

src/sss/theme.sss

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