wp-optimize / vendor / team-updraft / common-libs / src / updraft-theme / helpers / responsive-variables-generator.scss

responsive-variables-generator.scss in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.7.0, at vendor/team-updraft/common-libs/src/updraft-theme/helpers/responsive-variables-generator.scss

59 lines 2.4 KB

Raw Download Zip

1	@use "./base-units.scss" as *;
2	@use "./breakpoints.scss" as *;
3
4	@function tu-resolve-value($value) {
5	// If it's a string and starts with 'bu-', then only map with base units.
6	@if type-of($value) == 'string' and str-index($value, 'bu-') == 1 {
7	@return map-get($base-units, $value);
8	}
9
10	// Else return the value directly.
11	@return $value;
12	}
13
14	// Generates desktop-first variables.
15	@mixin tu-generate-responsive-variables($prefix, $definitions) {
16	// --- PART 1: Define all base variables in :root ---
17	@at-root :root {
18	@each $name, $bu-ref in $definitions {
19	$variable-name: --#{$prefix}-#{$name};
20
21	@if type-of($bu-ref) == 'map' {
22	// It's responsive, so set the "desktop" value as the base
23	@if map-has-key($bu-ref, "desktop") {
24	$desktop-value: tu-resolve-value(map-get($bu-ref, "desktop"));
25	#{$variable-name}: #{$desktop-value};
26	} @else {
27	// Warn developer to add desktop breakpoint value.
28	@warn "TU Theme: Responsive variable '--#{$prefix}-#{$name}' is missing the required 'desktop' breakpoint value.";
29	}
30	} @else {
31	// It's static, so set its value as the base
32	$static-value: tu-resolve-value($bu-ref);
33	#{$variable-name}: #{$static-value};
34	}
35	}
36	}
37
38	// --- PART 2: Loop through breakpoints to create media queries for overrides ---
39	@each $bp-name, $bp-width in $breakpoints {
40	// We skip "desktop" because that's our base
41	@if $bp-name != "desktop" {
42	@at-root {
43	@media (max-width: #{$bp-width}) {
44	:root {
45	@each $name, $bu-ref in $definitions {
46	// Only create an override if the variable is responsive AND has a value for this breakpoint
47	@if type-of($bu-ref) == 'map' and map-has-key($bu-ref, $bp-name) {
48	$variable-name: --#{$prefix}-#{$name};
49	$breakpoint-value: tu-resolve-value(map-get($bu-ref, $bp-name));
50	#{$variable-name}: #{$breakpoint-value};
51	}
52	}
53	}
54	}
55	}
56	}
57	}
58	}
59