Converting Layouts to Stylus

components/01_Layouts/sizes/_sizes.scss

@@ -1,39 +0,0 @@
-@mixin RV-Sizes($-prefix: '&') {
-
-    #{$-prefix}--half {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: 50%;
-        width: 50%;
-    }
-
-    #{$-prefix}--third {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: 33.33%;
-        width: 33.33%;
-    }
-
-    #{$-prefix}--quarter {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: 25%;
-        width: 25%;
-    }
-
-    #{$-prefix}--fixedSize {
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-
-    #{$-prefix}--content {
-        flex-grow: 0;
-        flex-shrink: 0;
-        width: max-content;
-        flex-basis: max-content;
-    }
-}
-
-.RV-Sizes {
-    @include RV-Sizes;
-}

components/01_Layouts/sizes/_sizes.styl

@@ -0,0 +1,49 @@
+RV-Sizes--half()
+	flex-grow 0
+	flex-shrink 0
+	flex-basis 50%
+	width 50%
+	
+RV-Sizes--third()
+	flex-grow 0
+	flex-shrink 0
+	flex-basis (100/3)%
+	width (100/3)%
+	
+RV-Sizes--quarter()
+	flex-grow 0
+	flex-shrink 0
+	flex-basis 25%
+	width 25%
+	
+RV-Sizes--fixedSize(width=100px)
+	flex-grow 0
+	flex-shrink 0
+	width min-content
+	flex-basis width
+	
+RV-Sizes--content()
+	flex-grow 0
+	flex-shrink 0
+	width max-content
+	flex-basis max-content
+
+RV-Sizes(prefix='&')
+
+	{prefix}--half
+		RV-Sizes--half()
+
+	{prefix}--third
+		RV-Sizes--third()
+
+	{prefix}--quarter
+		RV-Sizes--quarter()
+
+	{prefix}--fixedSize
+		RV-Sizes--fixedSize
+
+	{prefix}--content
+		RV-Sizes--content
+		
+.RV-Sizes
+	RV-Sizes()