changing file names | cleaning up a little

vue-theme/src/app.vue

 </script>
 
 <style lang="postcss">
-@import './sss/_variables.sss'
-@import './sss/_flex.sss'
+@import './sss/variables.sss'
 
 html > body
-    font-family: sans-serif
+    font-family: $sans
     main > article[class^="page--"]
-        padding: var(--spacer)
+        padding: $ms
         > section
-            padding: 0 0 var(--spacer)
+            padding: 0 0 $ms
     :--headings
         color: red
 
     nav.main, footer.main
         background-color: #ccc
-        margin: 0 0 var(--spacer)
-        padding: var(--spacer)
+        margin: 0 0 $ms
+        padding: $ms
         width: 100%
         ul > li
-            padding: 0 var(--spacer)
+            padding: 0 $ms
     footer.main
-        margin: var(--spacer) 0 0
+        margin: $ms 0 0
 </style>

vue-theme/src/sss/_flex.sss → vue-theme/src/sss/_helpers.sss

-[class^="f-"]
+// Custom selectors
+@custom-selector :--headings h1, h2, h3, h4, h5, h6
+
+@custom-media --viewport-medium (width <= 50rem)
+
+%flexer
     display: flex
     justify-content: center
     align-items: center
 
 .f
-    &-row
-        flex-direction: row
-    &-col
-        flex-direction: column
-    &-grow
-        flex-grow: 1
     &-row, &-col
+        @extend %flexer
         &.start
             justify-content: flex-start
         &.end
         &.between
             justify-content: space-between
         &.around
-            justify-content: space-around
+            justify-content: space-around
+    &-row
+        flex-direction: row
+    &-col
+        flex-direction: column
+    &-grow
+        flex-grow: 1

vue-theme/src/sss/_variables.sss

-// Custom selectors
-@custom-selector :--headings h1, h2, h3, h4, h5, h6
-
-@custom-media --viewport-medium (width <= 50rem)
-
-:root
-  --spacer: 0.5em

vue-theme/src/sss/index.js

 // Include all your *.sss Sugarss files
-import './reset.sss'
+import './_reset.sss'
+import './_helpers.sss'

vue-theme/src/sss/variables.sss

+// Colors
+$blue: #0076A3
+$chart-bg: rgba(20,20,20)
+$background: #444
+$background-light: #505050
+$dark: #3F3F3F
+$darker: #383838
+$light: #BBBBBB
+$lighter: #CCCCCC
+$primary: #008462
+$primary-light: #00D6A3
+$primary-lighter: #CEFFF3
+$primary-dark: #007351
+
+// Fonts
+$sans: 'sans-serif'
+$serif: 'serif'
+$mono: 'monospace'
+
+// Proportion (to be replaced with modular scale)
+$ms: 0.7em
+
+// Circles for add page
+$radius: 2.5vw
+$path: 4px
+
+$transition: 300ms

vue-theme/style.css

 Version: 1.0.0
 License: MIT
 Contributors: Sagar Bhatt, Pradeep Sonawane
-*/
-html body {
-    color: purple;
-}
+*/