POC advancved ideas (ruleset when 2 mixins are combined)
This commit is contained in:
parent
52af65da92
commit
f6e10ad2aa
90
components/00_Global/_selectorHook.scss
Normal file
90
components/00_Global/_selectorHook.scss
Normal file
@ -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);
|
||||
}
|
@ -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 {
|
||||
|
@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import '00_Global/global';
|
||||
@import '01_Layouts/layouts';
|
||||
@import '02_Styles/styles';
|
||||
|
Loading…
Reference in New Issue
Block a user