POC advancved ideas (ruleset when 2 mixins are combined)

components/00_Global/_selectorHook.scss

@@ -0,0 +1,90 @@
+$-hooks: ();
+@use "sass:meta";
+
+
+/*
+ * A system to store a context for a CSS-Selector.
+ * Can be used to apply speacial rules when mixins are combined
+ */
+
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+/*
+ * Generates a key-safe version of the selector
+ */
+@function _generate_selector_identifier() {
+    $-path: str-replace(#{&}, '.', '');
+    $-path: str-replace(#{$-path}, ' ', '');
+
+    @return $-path;
+}
+
+@function hook($-key, $-value) {
+
+    $-path: _generate_selector_identifier();
+
+    $-context: ();
+
+    @if map-has-key($-hooks, $-path) {
+        $-context: map-get($-hooks, $-path);
+    }
+
+    $-context: map-merge($-context, ($-key: $-value));
+
+    $-hooks: map-merge($-hooks, ($-path: $-context)) !global;
+
+    @return 'Creating Hook for '+#{&}+' with '+#{$-key}+': '+#{$-value};
+}
+
+@function append-hook($-kwargs) {
+    $-path: _generate_selector_identifier();
+
+    $-hooks: map-merge($-hooks, ($-path: map-merge(get-hook(), $-kwargs))) !global;
+    @return 'Added '+inspect($-kwargs)+' to the hook of '+#{&};
+}
+
+@function has-hook() {
+    @return map-has-key($-hooks, _generate_selector_identifier());
+}
+
+@function get-hook() {
+    $-map: map-get($-hooks, _generate_selector_identifier());
+
+    @if $-map !=null {
+        @return $-map;
+    }
+
+    @return ('selectors': ());
+}
+
+@function get-hook-value($-key) {
+
+    $-hook: get-hook();
+
+    @if $-hook !=null {
+        @if map-has-key($-hook, $-key) {
+            @return map-get($-hook, $-key);
+        }
+    }
+
+    @return null;
+}
+
+@mixin RV-Utils__Hook--catch {
+
+    @if has-hook() {
+        @content;
+    }
+}
+
+@mixin RV-Utils__Hook--throw($-kwargs, $-css-selectors...) {
+    @debug append-hook($-kwargs);
+}

components/01_Layouts/flexGrid/_flexGrid.scss

@@ -1,13 +1,42 @@
-@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
+@mixin RV-FlexGrid__Container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
-    grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
-    grid-auto-rows: minmax($-item_height, 1fr);
 }
 
-@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px, $-prefix: '&') {
+@mixin RV-FlexGrid__Container--autoWidth($-item-height: 300px, $-item-min-width: 300px) {
+    grid-template-columns: repeat(auto-fill, minmax($-item-min-width, 1fr));
+    grid-template-rows: repeat(auto-fill, minmax($-item-height, 1fr));
+    grid-auto-rows: minmax($-item-height, 1fr);
+}
+
+@mixin RV-FlexGrid__Container--fixedSize($-item-height: 300px, $-item-width: 300px) {
+    @include RV-FlexGrid__Container--autoWidth($-item-height, $-item-width);
+    grid-template-columns: repeat(auto-fill, $-item-width);
+    justify-content: space-between;
+}
+
+@mixin RV-FlexGrid__Container--masonry($-item-width: 300px) {
+    display: block;
+    column-count: auto;
+    column-width: $-item-width;
+
+    @include RV-Utils__Hook--throw(());
+}
+
+@mixin RV-FlexGrid($-prefix: '&') {
     #{$-prefix}__Container {
-        @include RV-FlexGrid__Container($-item_width, $-item_height);
+        @include RV-FlexGrid__Container;
+
+        &--autoWidth {
+            @include RV-FlexGrid__Container--autoWidth;
+        }
+
+        &--fixedSize {
+            @include RV-FlexGrid__Container--fixedSize;
+        }
+
+        &--masonry {
+            @include RV-FlexGrid__Container--masonry;
+        }
     }
 
     #{$-prefix}__Item {

components/_components.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import '00_Global/global';
 @import '01_Layouts/layouts';
 @import '02_Styles/styles';