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.5.5, at vendor/team-updraft/common-libs/src/updraft-theme/helpers/responsive-variables-generator.scss
| 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 |