Relativ CSS Class Names

components/01_Layouts/flexGrid/_flexGrid.scss

@@ -1,20 +1,22 @@
-RV-FlexGrid{
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+@mixin RV-FlexGrid {
+	&__Container {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 
-	&--sameHeight {
-		grid-auto-rows: 1fr;
+		&--sameHeight {
+			grid-auto-rows: 1fr;
+		}
+
+		&--spacing {
+			gap: 10px;
+		}
 	}
 
-	&--spacing {
-		gap: 10px;
+	&__Item {
+		@include align-content;
 	}
 }
 
-.RV-FlexGrid__Container {
-	@extend RV-FlexGrid;
-
-	.RV-FlexGrid__Item {
-		@include align-content;
-	}
-} 
+.RV-FlexGrid{
+	@include RV-FlexGrid;
+}

components/01_Layouts/flexRow/_flexRow.scss

@@ -1,22 +1,21 @@
-RV-FlexRow {
-	display: flex;
-	flex-direction: row;
-	gap: 10px;
-	justify-content: space-around;
+@mixin RV-FlexRow {
+	&__Container {
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+		justify-content: space-around;
 
-	&--wrap {
-		flex-wrap: wrap;
+		&--wrap {
+			flex-wrap: wrap;
+		}
 	}
 
-	* {
+	&__Item {
 		width: 100%;
+		@include align-content;
 	}
 }
 
-.RV-FlexRow__Container {
-	@extend RV-FlexRow;
-
-	.RV-FlexRow__Item {
-		@include align-content;
-	}
+.RV-FlexRow{
+	@include RV-FlexRow;
 }

components/rcss.scss

@@ -1,2 +1,2 @@
-@import './components';
-@import './pink.css';
+@import './pink.css';
+@import './components';