diff --git a/stylesheets/_breakpoint.scss b/stylesheets/_breakpoint.scss index 2ede6b7..bc6b408 100644 --- a/stylesheets/_breakpoint.scss +++ b/stylesheets/_breakpoint.scss @@ -1,49 +1,27 @@ -////////////////////////////// -// Default Variables -////////////////////////////// -$Breakpoint-Settings: ( - 'default media': all, - 'default feature': min-width, - 'default pair': width, - - 'force all media type': false, - 'to ems': false, - 'transform resolutions': true, - - 'no queries': false, - 'no query fallbacks': false, - - 'base font size': 16px, - - 'legacy syntax': false -); - -$breakpoint: () !default; - ////////////////////////////// // Imports ////////////////////////////// -@import "breakpoint/settings"; -@import 'breakpoint/context'; -@import 'breakpoint/helpers'; -@import 'breakpoint/parsers'; -@import 'breakpoint/no-query'; +@use "breakpoint/settings"; +@use 'breakpoint/context'; +@use 'breakpoint/helpers'; +@use 'breakpoint/parsers'; +@use 'breakpoint/no-query'; -@import 'breakpoint/respond-to'; +//@use 'breakpoint/respond-to'; -@import "breakpoint/legacy-settings"; +@use "breakpoint/legacy-settings"; ////////////////////////////// // Breakpoint Mixin ////////////////////////////// @mixin breakpoint($query, $no-query: false) { - @include legacy-settings-warning; + @include legacy-settings.legacy-settings-warning; // Reset contexts - @include private-breakpoint-reset-contexts(); + @include context.private-breakpoint-reset-contexts(); - $breakpoint: breakpoint($query, false); + $breakpoint: parsers.breakpoint($query, false); $query-string: map-get($breakpoint, 'query'); $query-fallback: map-get($breakpoint, 'fallback'); @@ -57,31 +35,31 @@ $breakpoint: () !default; } @if $query-fallback != false { - $context-setter: private-breakpoint-set-context('no-query', $query-fallback); + $context-setter: context.private-breakpoint-set-context('no-query', $query-fallback); } // Print Out Query String - @if not breakpoint-get('no queries') { + @if not settings.breakpoint-get('no queries') { @media #{$query-string} { @content; } } - @if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true { + @if settings.breakpoint-get('no query fallbacks') != false or settings.breakpoint-get('no queries') == true { - $type: type-of(breakpoint-get('no query fallbacks')); + $type: type-of(settings.breakpoint-get('no query fallbacks')); $print: false; @if ($type == 'bool') { $print: true; } @else if ($type == 'string') { - @if $query-fallback == breakpoint-get('no query fallbacks') { + @if $query-fallback == settings.breakpoint-get('no query fallbacks') { $print: true; } } @else if ($type == 'list') { - @each $wrapper in breakpoint-get('no query fallbacks') { + @each $wrapper in settings.breakpoint-get('no query fallbacks') { @if $query-fallback == $wrapper { $print: true; } @@ -103,7 +81,7 @@ $breakpoint: () !default; } } - @include private-breakpoint-reset-contexts(); + @include context.private-breakpoint-reset-contexts(); } diff --git a/stylesheets/breakpoint/_context.scss b/stylesheets/breakpoint/_context.scss index 57947f5..0b51a7b 100644 --- a/stylesheets/breakpoint/_context.scss +++ b/stylesheets/breakpoint/_context.scss @@ -1,3 +1,5 @@ +@use "settings"; + ////////////////////////////// // Private Breakpoint Variables ////////////////////////////// @@ -34,7 +36,7 @@ $private-breakpoint-query-count: 0 !default; } @else { @if breakpoint-has-context() and $feature == 'media' { - @return breakpoint-get('default media'); + @return settings.breakpoint-get('default media'); } @else { @return false; @@ -59,7 +61,7 @@ $private-breakpoint-query-count: 0 !default; $v-holder: (); @for $i from 1 to $private-breakpoint-query-count { @if $feature == 'media' { - $v-holder: append($v-holder, breakpoint-get('default media')); + $v-holder: append($v-holder, settings.breakpoint-get('default media')); } @else { $v-holder: append($v-holder, false); @@ -73,7 +75,7 @@ $private-breakpoint-query-count: 0 !default; $length: length($v-holder); @for $i from $length to $private-breakpoint-query-count - 1 { @if $feature == 'media' { - $v-holder: append($v-holder, breakpoint-get('default media')); + $v-holder: append($v-holder, settings.breakpoint-get('default media')); } @else { $v-holder: append($v-holder, false); diff --git a/stylesheets/breakpoint/_helpers.scss b/stylesheets/breakpoint/_helpers.scss index b34f4f7..2205006 100644 --- a/stylesheets/breakpoint/_helpers.scss +++ b/stylesheets/breakpoint/_helpers.scss @@ -3,19 +3,20 @@ ////////////////////////////// @use "sass:math"; +@use "settings"; @function breakpoint-to-base-em($value) { $value-unit: unit($value); // Will convert relative EMs into root EMs. - @if breakpoint-get('base font size') and type-of(breakpoint-get('base font size')) == 'number' and $value-unit == 'em' { - $base-unit: unit(breakpoint-get('base font size')); + @if settings.breakpoint-get('base font size') and type-of(settings.breakpoint-get('base font size')) == 'number' and $value-unit == 'em' { + $base-unit: unit(settings.breakpoint-get('base font size')); @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' { - @return math.div(base-conversion($value), base-conversion(breakpoint-get('base font size'))) * 1em; + @return math.div(base-conversion($value), base-conversion(settings.breakpoint-get('base font size'))) * 1em; } @else { - @warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!'; + @warn '#{settings.breakpoint-get(\'base font size\')} is not set in valid units for font size!'; @return false; } } @@ -140,7 +141,7 @@ $breakpoint-single-string-features: 'color', @function breakpoint-is-resolution($feature) { $resolutions: 'device-pixel-ratio', 'dpr'; - @if breakpoint-get('transform resolutions') { + @if settings.breakpoint-get('transform resolutions') { $resolutions: append($resolutions, 'resolution'); } diff --git a/stylesheets/breakpoint/_legacy-settings.scss b/stylesheets/breakpoint/_legacy-settings.scss index e060ebe..49c4b29 100644 --- a/stylesheets/breakpoint/_legacy-settings.scss +++ b/stylesheets/breakpoint/_legacy-settings.scss @@ -1,3 +1,5 @@ +@use "settings"; + @mixin legacy-settings-warning { $legacyVars: ( 'default-media': 'default media', @@ -20,31 +22,31 @@ ////////////////////////////// // Hand correct each setting ////////////////////////////// - @if global-variable-exists('breakpoint-default-media') and $breakpoint-default-media != breakpoint-get('default media') { - @include breakpoint-set('default media', $breakpoint-default-media); + @if global-variable-exists('breakpoint-default-media') and $breakpoint-default-media != settings.breakpoint-get('default media') { + @include settings.breakpoint-set('default media', $breakpoint-default-media); } - @if global-variable-exists('breakpoint-default-feature') and $breakpoint-default-feature != breakpoint-get('default feature') { - @include breakpoint-set('default feature', $breakpoint-default-feature); + @if global-variable-exists('breakpoint-default-feature') and $breakpoint-default-feature != settings.breakpoint-get('default feature') { + @include settings.breakpoint-set('default feature', $breakpoint-default-feature); } - @if global-variable-exists('breakpoint-force-media-all') and $breakpoint-force-media-all != breakpoint-get('force all media type') { - @include breakpoint-set('force all media type', $breakpoint-force-media-all); + @if global-variable-exists('breakpoint-force-media-all') and $breakpoint-force-media-all != settings.breakpoint-get('force all media type') { + @include settings.breakpoint-set('force all media type', $breakpoint-force-media-all); } - @if global-variable-exists('breakpoint-to-ems') and $breakpoint-to-ems != breakpoint-get('to ems') { - @include breakpoint-set('to ems', $breakpoint-to-ems); + @if global-variable-exists('breakpoint-to-ems') and $breakpoint-to-ems != settings.breakpoint-get('to ems') { + @include settings.breakpoint-set('to ems', $breakpoint-to-ems); } - @if global-variable-exists('breakpoint-resolutions') and $breakpoint-resolutions != breakpoint-get('transform resolutions') { - @include breakpoint-set('transform resolutions', $breakpoint-resolutions); + @if global-variable-exists('breakpoint-resolutions') and $breakpoint-resolutions != settings.breakpoint-get('transform resolutions') { + @include settings.breakpoint-set('transform resolutions', $breakpoint-resolutions); } - @if global-variable-exists('breakpoint-no-queries') and $breakpoint-no-queries != breakpoint-get('no queries') { - @include breakpoint-set('no queries', $breakpoint-no-queries); + @if global-variable-exists('breakpoint-no-queries') and $breakpoint-no-queries != settings.breakpoint-get('no queries') { + @include settings.breakpoint-set('no queries', $breakpoint-no-queries); } - @if global-variable-exists('breakpoint-no-query-fallbacks') and $breakpoint-no-query-fallbacks != breakpoint-get('no query fallbacks') { - @include breakpoint-set('no query fallbacks', $breakpoint-no-query-fallbacks); + @if global-variable-exists('breakpoint-no-query-fallbacks') and $breakpoint-no-query-fallbacks != settings.breakpoint-get('no query fallbacks') { + @include settings.breakpoint-set('no query fallbacks', $breakpoint-no-query-fallbacks); } - @if global-variable-exists('breakpoint-base-font-size') and $breakpoint-base-font-size != breakpoint-get('base font size') { - @include breakpoint-set('base font size', $breakpoint-base-font-size); + @if global-variable-exists('breakpoint-base-font-size') and $breakpoint-base-font-size != settings.breakpoint-get('base font size') { + @include settings.breakpoint-set('base font size', $breakpoint-base-font-size); } - @if global-variable-exists('breakpoint-legacy-syntax') and $breakpoint-legacy-syntax != breakpoint-get('legacy syntax') { - @include breakpoint-set('legacy syntax', $breakpoint-legacy-syntax); + @if global-variable-exists('breakpoint-legacy-syntax') and $breakpoint-legacy-syntax != settings.breakpoint-get('legacy syntax') { + @include settings.breakpoint-set('legacy syntax', $breakpoint-legacy-syntax); } } \ No newline at end of file diff --git a/stylesheets/breakpoint/_parsers.scss b/stylesheets/breakpoint/_parsers.scss index f0b053f..592f5cc 100644 --- a/stylesheets/breakpoint/_parsers.scss +++ b/stylesheets/breakpoint/_parsers.scss @@ -1,13 +1,19 @@ ////////////////////////////// // Import Parser Pieces ////////////////////////////// -@import "parsers/query"; -@import "parsers/single"; -@import "parsers/double"; -@import "parsers/triple"; -@import "parsers/resolution"; - -$Memo-Exists: function-exists(memo-get) and function-exists(memo-set); +@use "parsers/query"; +@use "parsers/single"; +@use "parsers/double"; +@use "parsers/triple"; +@use "parsers/resolution"; +@use "context"; +@use "helpers"; +@use "no-query"; +@use "settings"; +@use "../../node_modules/sassy-maps/sass/memo"; + +//$Memo-Exists: function-exists(memo-get) and function-exists(memo-set); +$Memo-Exists: false; ////////////////////////////// // Breakpoint Function @@ -18,7 +24,7 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); // Grab the Memo Output if Memoization can be a thing @if $Memo-Exists { - $return: memo-get(breakpoint, breakpoint $query $contexts); + $return: memo.memo-get(breakpoint, breakpoint $query $contexts); @if $return != null { $run: false; @@ -32,8 +38,8 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); $return: (); // Reserve Global Private Breakpoint Context - $holder-context: $private-breakpoint-context-holder; - $holder-query-count: $private-breakpoint-query-count; + $holder-context: context.$private-breakpoint-context-holder; + $holder-query-count: context.$private-breakpoint-query-count; // Reset Global Private Breakpoint Context $private-breakpoint-context-holder: () !global; @@ -44,20 +50,20 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); $or-list: if(list-separator($query) == 'comma', true, false); - @if ($or-list == false and breakpoint-get('legacy syntax') == false) { + @if ($or-list == false and settings.breakpoint-get('legacy syntax') == false) { $query-string: breakpoint-parse($query); } @else { $length: length($query); $last: nth($query, $length); - $query-fallback: breakpoint-no-query($last); + $query-fallback: no-query.breakpoint-no-query($last); @if ($query-fallback != false) { $length: $length - 1; } - @if (breakpoint-get('legacy syntax') == true) { + @if (settings.breakpoint-get('legacy syntax') == true) { $mq: (); @for $i from 1 through $length { @@ -81,11 +87,11 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); ); @if length($contexts) > 0 and nth($contexts, 1) != false { @if $query-fallback != false { - $context-setter: private-breakpoint-set-context('no-query', $query-fallback); + $context-setter: context.private-breakpoint-set-context('no-query', $query-fallback); } $context-map: (); @each $context in $contexts { - $context-map: map-merge($context-map, ($context: breakpoint-get-context($context))); + $context-map: map-merge($context-map, ($context: context.breakpoint-get-context($context))); } $return: map-merge($return, (context: $context-map)); } @@ -95,7 +101,7 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); $private-breakpoint-query-count: 0 !global; @if $Memo-Exists { - $holder: memo-set(breakpoint, breakpoint $query $contexts, $return); + $holder: memo.memo-set(breakpoint, breakpoint $query $contexts, $return); } } @@ -107,23 +113,23 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); ////////////////////////////// @function breakpoint-parse($query) { // Increase number of 'and' queries - $private-breakpoint-query-count: $private-breakpoint-query-count + 1 !global; + $private-breakpoint-query-count: context.$private-breakpoint-query-count + 1 !global; // Set up Media Type $query-print: ''; - $force-all: ((breakpoint-get('force all media type') == true) and (breakpoint-get('default media') == 'all')); + $force-all: ((settings.breakpoint-get('force all media type') == true) and (settings.breakpoint-get('default media') == 'all')); $empty-media: true; - @if ($force-all == true) or (breakpoint-get('default media') != 'all') { + @if ($force-all == true) or (settings.breakpoint-get('default media') != 'all') { // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all) - $query-print: breakpoint-get('default media'); + $query-print: settings.breakpoint-get('default media'); $empty-media: false; } $query-resolution: false; - $query-holder: breakpoint-parse-query($query); + $query-holder: query.breakpoint-parse-query($query); @@ -139,25 +145,25 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); $feature: nth($feature, 1); // Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type - @if (breakpoint-is-media($feature)) { + @if (helpers.breakpoint-is-media($feature)) { @if ($force-all == true) or ($feature != 'all') { // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all) $query-print: $feature; $empty-media: false; // Set Context - $context-setter: private-breakpoint-set-context(media, $query-print); + $context-setter: context.private-breakpoint-set-context(media, $query-print); } } @else { - $parsed: breakpoint-parse-single($feature, $empty-media, $first); + $parsed: single.breakpoint-parse-single($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } // Parse a double feature @else if ($length == 2) { - @if (breakpoint-is-resolution($feature) != false) { + @if (helpers.breakpoint-is-resolution($feature) != false) { $query-resolution: $feature; } @else { @@ -167,15 +173,15 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); // then we parse it as a normal double $alpha: nth($feature, 1); $beta: nth($feature, 2); - @if breakpoint-single-string($alpha) or breakpoint-single-string($beta) { - $parsed: breakpoint-parse-single($alpha, $empty-media, $first); + @if helpers.breakpoint-single-string($alpha) or helpers.breakpoint-single-string($beta) { + $parsed: single.breakpoint-parse-single($alpha, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; - $parsed: breakpoint-parse-single($beta, $empty-media, $first); + $parsed: single.breakpoint-parse-single($beta, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; } @else { - $parsed: breakpoint-parse-double($feature, $empty-media, $first); + $parsed: double.breakpoint-parse-double($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } @@ -183,7 +189,7 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); } // Parse a triple feature @else if ($length == 3) { - $parsed: breakpoint-parse-triple($feature, $empty-media, $first); + $parsed: triple.breakpoint-parse-triple($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } @@ -191,24 +197,24 @@ $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); } @if ($query-resolution != false) { - $query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first); + $query-print: resolution.breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first); } // Loop through each feature that's been detected so far and append 'false' to the the value list to increment their counters - @each $f, $v in $private-breakpoint-context-holder { + @each $f, $v in context.$private-breakpoint-context-holder { $v-holder: $v; $length: length($v-holder); @if length($v-holder) < $private-breakpoint-query-count { @for $i from $length to $private-breakpoint-query-count { @if $f == 'media' { - $v-holder: append($v-holder, breakpoint-get('default media')); + $v-holder: append($v-holder, settings.breakpoint-get('default media')); } @else { $v-holder: append($v-holder, false); } } } - $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($f: $v-holder)) !global; + $private-breakpoint-context-holder: map-merge(context.$private-breakpoint-context-holder, ($f: $v-holder)) !global; } @return $query-print; diff --git a/stylesheets/breakpoint/_respond-to.scss b/stylesheets/breakpoint/_respond-to.scss index e2462c5..c39dcaf 100644 --- a/stylesheets/breakpoint/_respond-to.scss +++ b/stylesheets/breakpoint/_respond-to.scss @@ -1,3 +1,5 @@ +@use '../breakpoint'; + //////////////////////// // Default the Breakpoints variable //////////////////////// @@ -20,7 +22,7 @@ $BREAKPOINTS: () !default; @content; } @else if map-has-key($BREAKPOINTS, $context) { - @include breakpoint(map-get($BREAKPOINTS, $context), $no-query) { + @include breakpoint.breakpoint(map-get($BREAKPOINTS, $context), $no-query) { @content; } } diff --git a/stylesheets/breakpoint/_settings.scss b/stylesheets/breakpoint/_settings.scss index 05ee689..2e35475 100644 --- a/stylesheets/breakpoint/_settings.scss +++ b/stylesheets/breakpoint/_settings.scss @@ -1,8 +1,10 @@ +@use "vars"; + ////////////////////////////// // Has Setting ////////////////////////////// @function breakpoint-has($setting) { - @if map-has-key($breakpoint, $setting) { + @if map-has-key(vars.$breakpoint, $setting) { @return true; } @else { @@ -15,10 +17,10 @@ ////////////////////////////// @function breakpoint-get($setting) { @if breakpoint-has($setting) { - @return map-get($breakpoint, $setting); + @return map-get(vars.$breakpoint, $setting); } @else { - @return map-get($Breakpoint-Settings, $setting); + @return map-get(vars.$Breakpoint-Settings, $setting); } } @@ -29,7 +31,7 @@ @if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null { @warn "Words in Breakpoint settings should be separated by spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed."; } - $breakpoint: map-merge($breakpoint, ($setting: $value)) !global; + $breakpoint: map-merge(vars.$breakpoint, ($setting: $value)) !global; @return true; } @@ -57,7 +59,7 @@ } @each $setting in $settings { - $breakpoint: map-remove($breakpoint, $setting) !global; + $breakpoint: map-remove(vars.$breakpoint, $setting) !global; } @return true; } diff --git a/stylesheets/breakpoint/_vars.scss b/stylesheets/breakpoint/_vars.scss new file mode 100644 index 0000000..e6e37ad --- /dev/null +++ b/stylesheets/breakpoint/_vars.scss @@ -0,0 +1,21 @@ +////////////////////////////// +// Default Variables +////////////////////////////// +$Breakpoint-Settings: ( + 'default media': all, + 'default feature': min-width, + 'default pair': width, + + 'force all media type': false, + 'to ems': false, + 'transform resolutions': true, + + 'no queries': false, + 'no query fallbacks': false, + + 'base font size': 16px, + + 'legacy syntax': false +); + +$breakpoint: () !default; \ No newline at end of file diff --git a/stylesheets/breakpoint/parsers/_double.scss b/stylesheets/breakpoint/parsers/_double.scss index 24580c1..257448a 100644 --- a/stylesheets/breakpoint/parsers/_double.scss +++ b/stylesheets/breakpoint/parsers/_double.scss @@ -1,9 +1,9 @@ ////////////////////////////// // Import Pieces ////////////////////////////// -@import "double/default-pair"; -@import "double/double-string"; -@import "double/default"; +@use "double/default-pair"; +@use "double/double-string"; +@use "double/default"; @function breakpoint-parse-double($feature, $empty-media, $first) { $parsed: ''; @@ -18,15 +18,15 @@ // If we've got two numbers, we know we need to use the default pair because there are no media queries that has a media feature that is a number @if type-of($first) == 'number' and type-of($second) == 'number' { - $parsed: breakpoint-parse-default-pair($first, $second); + $parsed: default-pair.breakpoint-parse-default-pair($first, $second); } // If they are both strings, we send it through the string parser @else if type-of($first) == 'string' and type-of($second) == 'string' { - $parsed: breakpoint-parse-double-string($first, $second); + $parsed: double-string.breakpoint-parse-double-string($first, $second); } // If it's a string/number pair, we parse it as a normal double @else { - $parsed: breakpoint-parse-double-default($first, $second); + $parsed: default.breakpoint-parse-double-default($first, $second); } @return $leader + $parsed; diff --git a/stylesheets/breakpoint/parsers/_query.scss b/stylesheets/breakpoint/parsers/_query.scss index b138b39..3b20a0d 100644 --- a/stylesheets/breakpoint/parsers/_query.scss +++ b/stylesheets/breakpoint/parsers/_query.scss @@ -1,3 +1,5 @@ +@use "../helpers"; + @function breakpoint-parse-query($query) { // Parse features out of an individual query $feature-holder: (); @@ -21,7 +23,7 @@ } // If the string value can be a single value, check to see if the number passed in is a valid input for said single value. Fortunately, all current single-value options only accept unitless numbers, so this check is easy. - @if breakpoint-single-string($value) { + @if helpers.breakpoint-single-string($value) { @if unitless($number) { $feature-holder: append($value, $number, space); $query-holder: append($query-holder, $feature-holder, comma); @@ -29,7 +31,7 @@ } } // If the string is a media type, split the query - @if breakpoint-is-media($value) { + @if helpers.breakpoint-is-media($value) { $query-holder: append($query-holder, nth($query, 1)); $query-holder: append($query-holder, nth($query, 2)); @return $query-holder; @@ -50,7 +52,7 @@ } // If they're both strings and neither are singles, we roll with that. @else if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'string') { - @if not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) { + @if not helpers.breakpoint-single-string(nth($query, 1)) and not helpers.breakpoint-single-string(nth($query, 2)) { $feature-holder: append(nth($query, 1), nth($query, 2), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; @@ -61,14 +63,14 @@ // If we've got three items and none is a list, we check to see @if type-of(nth($query, 1)) != 'list' and type-of(nth($query, 2)) != 'list' and type-of(nth($query, 3)) != 'list' { // If none of the items are single string values and none of the values are media values, we're good. - @if (not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) and not breakpoint-single-string(nth($query, 3))) and ((not breakpoint-is-media(nth($query, 1)) and not breakpoint-is-media(nth($query, 2)) and not breakpoint-is-media(nth($query, 3)))) { + @if (not helpers.breakpoint-single-string(nth($query, 1)) and not helpers.breakpoint-single-string(nth($query, 2)) and not helpers.breakpoint-single-string(nth($query, 3))) and ((not helpers.breakpoint-is-media(nth($query, 1)) and not helpers.breakpoint-is-media(nth($query, 2)) and not helpers.breakpoint-is-media(nth($query, 3)))) { $feature-holder: append(nth($query, 1), nth($query, 2), space); $feature-holder: append($feature-holder, nth($query, 3), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } // let's check to see if the first item is a media type - @else if breakpoint-is-media(nth($query, 1)) { + @else if helpers.breakpoint-is-media(nth($query, 1)) { $query-holder: append($query-holder, nth($query, 1)); $feature-holder: append(nth($query, 2), nth($query, 3), space); $query-holder: append($query-holder, $feature-holder); diff --git a/stylesheets/breakpoint/parsers/_resolution.scss b/stylesheets/breakpoint/parsers/_resolution.scss index 19769ad..0db9c48 100644 --- a/stylesheets/breakpoint/parsers/_resolution.scss +++ b/stylesheets/breakpoint/parsers/_resolution.scss @@ -1,4 +1,5 @@ -@import "resolution/resolution"; +@use "resolution/resolution"; +@use "../settings"; @function breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first) { $leader: ''; @@ -7,8 +8,8 @@ $leader: 'and '; } - @if breakpoint-get('transform resolutions') and $query-resolution { - $resolutions: breakpoint-make-resolutions($query-resolution); + @if settings.breakpoint-get('transform resolutions') and $query-resolution { + $resolutions: resolution.breakpoint-make-resolutions($query-resolution); $length: length($resolutions); $query-holder: ''; diff --git a/stylesheets/breakpoint/parsers/_single.scss b/stylesheets/breakpoint/parsers/_single.scss index d9fd764..4b43ee7 100644 --- a/stylesheets/breakpoint/parsers/_single.scss +++ b/stylesheets/breakpoint/parsers/_single.scss @@ -1,7 +1,9 @@ ////////////////////////////// // Import Pieces ////////////////////////////// -@import "single/default"; +@use "single/default"; +@use "../context"; +@use "../helpers"; @function breakpoint-parse-single($feature, $empty-media, $first) { $parsed: ''; @@ -12,14 +14,14 @@ } // If it's a single feature that can stand alone, we let it - @if (breakpoint-single-string($feature)) { + @if (helpers.breakpoint-single-string($feature)) { $parsed: $feature; // Set Context - $context-setter: private-breakpoint-set-context($feature, $feature); + $context-setter: context.private-breakpoint-set-context($feature, $feature); } // If it's not a stand alone feature, we pass it off to the default handler. @else { - $parsed: breakpoint-parse-default($feature); + $parsed: default.breakpoint-parse-default($feature); } @return $leader + '(' + $parsed + ')'; diff --git a/stylesheets/breakpoint/parsers/_triple.scss b/stylesheets/breakpoint/parsers/_triple.scss index e273206..a6e2013 100644 --- a/stylesheets/breakpoint/parsers/_triple.scss +++ b/stylesheets/breakpoint/parsers/_triple.scss @@ -1,7 +1,7 @@ ////////////////////////////// // Import Pieces ////////////////////////////// -@import "triple/default"; +@use "triple/default"; @function breakpoint-parse-triple($feature, $empty-media, $first) { $parsed: ''; @@ -29,7 +29,7 @@ } } - $parsed: breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2)); + $parsed: default.breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2)); @return $leader + $parsed; diff --git a/stylesheets/breakpoint/parsers/double/_default-pair.scss b/stylesheets/breakpoint/parsers/double/_default-pair.scss index f88432c..95a2b59 100644 --- a/stylesheets/breakpoint/parsers/double/_default-pair.scss +++ b/stylesheets/breakpoint/parsers/double/_default-pair.scss @@ -1,5 +1,9 @@ +@use "../../context"; +@use "../../helpers"; +@use "../../settings"; + @function breakpoint-parse-default-pair($first, $second) { - $default: breakpoint-get('default pair'); + $default: settings.breakpoint-get('default pair'); $min: ''; $max: ''; @@ -8,13 +12,13 @@ $max: max($first, $second); // Set Context - $context-setter: private-breakpoint-set-context(min-#{$default}, $min); - $context-setter: private-breakpoint-set-context(max-#{$default}, $max); + $context-setter: context.private-breakpoint-set-context(min-#{$default}, $min); + $context-setter: context.private-breakpoint-set-context(max-#{$default}, $max); // Make them EMs if need be - @if (breakpoint-get('to ems') == true) { - $min: breakpoint-to-base-em($min); - $max: breakpoint-to-base-em($max); + @if (settings.breakpoint-get('to ems') == true) { + $min: helpers.breakpoint-to-base-em($min); + $max: helpers.breakpoint-to-base-em($max); } @return '(min-#{$default}: #{$min}) and (max-#{$default}: #{$max})'; diff --git a/stylesheets/breakpoint/parsers/double/_default.scss b/stylesheets/breakpoint/parsers/double/_default.scss index 73190ed..1c45fc7 100644 --- a/stylesheets/breakpoint/parsers/double/_default.scss +++ b/stylesheets/breakpoint/parsers/double/_default.scss @@ -1,3 +1,7 @@ +@use "../../context"; +@use "../../helpers"; +@use "../../settings"; + @function breakpoint-parse-double-default($first, $second) { $feature: ''; $value: ''; @@ -12,10 +16,10 @@ } // Set Context - $context-setter: private-breakpoint-set-context($feature, $value); + $context-setter: context.private-breakpoint-set-context($feature, $value); - @if (breakpoint-get('to ems') == true) { - $value: breakpoint-to-base-em($value); + @if (settings.breakpoint-get('to ems') == true) { + $value: helpers.breakpoint-to-base-em($value); } @return '(#{$feature}: #{$value})' diff --git a/stylesheets/breakpoint/parsers/double/_double-string.scss b/stylesheets/breakpoint/parsers/double/_double-string.scss index c6fd0cb..157d180 100644 --- a/stylesheets/breakpoint/parsers/double/_double-string.scss +++ b/stylesheets/breakpoint/parsers/double/_double-string.scss @@ -1,13 +1,16 @@ +@use "../../context"; +@use "../../helpers"; + @function breakpoint-parse-double-string($first, $second) { $feature: ''; $value: ''; // Test to see which is the feature and which is the value - @if (breakpoint-string-value($first) == true) { + @if (helpers.breakpoint-string-value($first) == true) { $feature: $first; $value: $second; } - @else if (breakpoint-string-value($second) == true) { + @else if (helpers.breakpoint-string-value($second) == true) { $feature: $second; $value: $first; } @@ -16,7 +19,7 @@ } // Set Context - $context-setter: private-breakpoint-set-context($feature, $value); + $context-setter: context.private-breakpoint-set-context($feature, $value); @return '(#{$feature}: #{$value})'; } \ No newline at end of file diff --git a/stylesheets/breakpoint/parsers/single/_default.scss b/stylesheets/breakpoint/parsers/single/_default.scss index 503ef42..76dc0ab 100644 --- a/stylesheets/breakpoint/parsers/single/_default.scss +++ b/stylesheets/breakpoint/parsers/single/_default.scss @@ -1,11 +1,15 @@ +@use "../../context"; +@use "../../helpers"; +@use "../../settings"; + @function breakpoint-parse-default($feature) { - $default: breakpoint-get('default feature'); + $default: settings.breakpoint-get('default feature'); // Set Context - $context-setter: private-breakpoint-set-context($default, $feature); + $context-setter: context.private-breakpoint-set-context($default, $feature); - @if (breakpoint-get('to ems') == true) and (type-of($feature) == 'number') { - @return '#{$default}: #{breakpoint-to-base-em($feature)}'; + @if (settings.breakpoint-get('to ems') == true) and (type-of($feature) == 'number') { + @return '#{$default}: #{helpers.breakpoint-to-base-em($feature)}'; } @else { @return '#{$default}: #{$feature}'; diff --git a/stylesheets/breakpoint/parsers/triple/_default.scss b/stylesheets/breakpoint/parsers/triple/_default.scss index 7fa418d..5ed7563 100644 --- a/stylesheets/breakpoint/parsers/triple/_default.scss +++ b/stylesheets/breakpoint/parsers/triple/_default.scss @@ -1,3 +1,7 @@ +@use "../../context"; +@use "../../helpers"; +@use "../../settings"; + @function breakpoint-parse-triple-default($feature, $first, $second) { // Sort into min and max @@ -5,13 +9,13 @@ $max: max($first, $second); // Set Context - $context-setter: private-breakpoint-set-context(min-#{$feature}, $min); - $context-setter: private-breakpoint-set-context(max-#{$feature}, $max); + $context-setter: context.private-breakpoint-set-context(min-#{$feature}, $min); + $context-setter: context.private-breakpoint-set-context(max-#{$feature}, $max); // Make them EMs if need be - @if (breakpoint-get('to ems') == true) { - $min: breakpoint-to-base-em($min); - $max: breakpoint-to-base-em($max); + @if (settings.breakpoint-get('to ems') == true) { + $min: helpers.breakpoint-to-base-em($min); + $max: helpers.breakpoint-to-base-em($max); } @return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})'; diff --git a/tests/index.js b/tests/index.js index 2eb0783..53342de 100644 --- a/tests/index.js +++ b/tests/index.js @@ -12,7 +12,7 @@ async function testMacro(t, file) { importers: [{ findFileUrl(url) { if (url.startsWith('breakpoint')) { - return new URL(url, pathToFileURL(path.join(process.cwd(), 'stylesheets/')));; + return new URL(url, pathToFileURL(path.join(process.cwd(), 'stylesheets/'))); } else if (url === 'memo' || url.startsWith('sassy-maps')) { return new URL(url, pathToFileURL(path.join(process.cwd(), 'node_modules/sassy-maps/sass/'))); } diff --git a/tests/tests/01_pixel.scss b/tests/tests/01_pixel.scss index bf175cc..077ece6 100644 --- a/tests/tests/01_pixel.scss +++ b/tests/tests/01_pixel.scss @@ -1,35 +1,37 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/respond-to'; /* * Assume `default feature` * if only a number - * $single-pixel-value: #{$single-pixel-value}; - * $single-em-value: #{$single-em-value}; + * $single-pixel-value: #{variables.$single-pixel-value}; + * $single-em-value: #{variables.$single-em-value}; */ .foo { - @include breakpoint($single-pixel-value) { + @include breakpoint.breakpoint(variables.$single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } - @include breakpoint($single-em-value) { + @include breakpoint.breakpoint(variables.$single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } - @include respond-to('single pixel value') { + @include respond-to.respond-to('single pixel value') { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } - @include respond-to('single pixel value, em') { + @include respond-to.respond-to('single pixel value, em') { content: '$single-em-value'; content: '@media (min-width: 30em)'; } - @include mq($single-pixel-value) { + @include breakpoint.mq(variables.$single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } - @include mq($single-em-value) { + @include breakpoint.mq(variables.$single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } diff --git a/tests/tests/02_pixel_to_em.scss b/tests/tests/02_pixel_to_em.scss index 7c20ce2..334d3d0 100644 --- a/tests/tests/02_pixel_to_em.scss +++ b/tests/tests/02_pixel_to_em.scss @@ -1,22 +1,24 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; /* @include breakpoint-set('to ems', true); */ -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .breakpoint-default-feature-to-ems { - @include breakpoint($single-pixel-value) { + @include breakpoint.breakpoint(variables.$single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } - @include breakpoint($single-em-value) { + @include breakpoint.breakpoint(variables.$single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } - @include mq($single-pixel-value) { + @include breakpoint.mq(variables.$single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } - @include mq($single-em-value) { + @include breakpoint.mq(variables.$single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } diff --git a/tests/tests/03_feature_values.scss b/tests/tests/03_feature_values.scss index 9e88ea0..b0623ad 100644 --- a/tests/tests/03_feature_values.scss +++ b/tests/tests/03_feature_values.scss @@ -1,72 +1,75 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * Single value with feature - * $feature-first : #{$feature-first}; - * $value-first : #{$value-first}; - * $arbitrary-feature : #{$arbitrary-feature}; - * $feature-value-both-strings : #{$feature-value-both-strings}; + * $feature-first : #{variables.$feature-first}; + * $value-first : #{variables.$value-first}; + * $arbitrary-feature : #{variables.$arbitrary-feature}; + * $feature-value-both-strings : #{variables.$feature-value-both-strings}; */ .foo { - @include breakpoint($feature-first) { + @include breakpoint.breakpoint(variables.$feature-first) { content: '$feature-first'; content: '@media (height: 500px)'; } - @include breakpoint($value-first) { + @include breakpoint.breakpoint(variables.$value-first) { content: '$value-first'; content: '@media (height: 500px)'; } - @include breakpoint($arbitrary-feature) { + @include breakpoint.breakpoint(variables.$arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } - @include breakpoint($feature-value-both-strings) { + @include breakpoint.breakpoint(variables.$feature-value-both-strings) { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } - @include mq($feature-first) { + @include breakpoint.mq(variables.$feature-first) { content: '$feature-first'; content: '@media (height: 500px)'; } - @include mq($value-first) { + @include breakpoint.mq(variables.$value-first) { content: '$value-first'; content: '@media (height: 500px)'; } - @include mq($arbitrary-feature) { + @include breakpoint.mq(variables.$arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } - @include mq($feature-value-both-strings) { + @include breakpoint.mq(variables.$feature-value-both-strings) { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .bar { - @include breakpoint($feature-first) { + @include breakpoint.breakpoint(variables.$feature-first) { content: '$feature-first'; content: '@media (height: 31.25em)'; } - @include breakpoint($value-first) { + @include breakpoint.breakpoint(variables.$value-first) { content: '$value-first'; content: '@media (height: 31.25em)'; } - @include breakpoint($arbitrary-feature) { + @include breakpoint.breakpoint(variables.$arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } - @include mq($feature-first) { + @include breakpoint.mq(variables.$feature-first) { content: '$feature-first'; content: '@media (height: 31.25em)'; } - @include mq($value-first) { + @include breakpoint.mq(variables.$value-first) { content: '$value-first'; content: '@media (height: 31.25em)'; } - @include mq($arbitrary-feature) { + @include breakpoint.mq(variables.$arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } diff --git a/tests/tests/04_min_max.scss b/tests/tests/04_min_max.scss index 7abda1b..a1d0cb8 100644 --- a/tests/tests/04_min_max.scss +++ b/tests/tests/04_min_max.scss @@ -1,29 +1,32 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * Set min-width/max-width * if both values are numbers - * $min-max-default-feature : #{$min-max-default-feature}; + * $min-max-default-feature : #{variables.$min-max-default-feature}; */ .foo{ - @include breakpoint($min-max-default-feature) { + @include breakpoint.breakpoint(variables.$min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } - @include mq($min-max-default-feature) { + @include breakpoint.mq(variables.$min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .bar { - @include breakpoint($min-max-default-feature) { + @include breakpoint.breakpoint(variables.$min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } - @include mq($min-max-default-feature) { + @include breakpoint.mq(variables.$min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } diff --git a/tests/tests/05_min_max_feature.scss b/tests/tests/05_min_max_feature.scss index 221034b..4c0ecd2 100644 --- a/tests/tests/05_min_max_feature.scss +++ b/tests/tests/05_min_max_feature.scss @@ -1,63 +1,66 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * Set min/max of feature * if there are two numbers and a feature - * $feature-min-max : #{$feature-min-max}; - * $min-max-feature : #{$min-max-feature}; - * $arbitrary-feature-min-max : #{$arbitrary-feature-min-max}; + * $feature-min-max : #{variables.$feature-min-max}; + * $min-max-feature : #{variables.$min-max-feature}; + * $arbitrary-feature-min-max : #{variables.$arbitrary-feature-min-max}; */ .min-max-feature { - @include breakpoint($feature-min-max) { + @include breakpoint.breakpoint(variables.$feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } - @include breakpoint($min-max-feature) { + @include breakpoint.breakpoint(variables.$min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } - @include breakpoint($arbitrary-feature-min-max) { + @include breakpoint.breakpoint(variables.$arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } - @include mq($feature-min-max) { + @include breakpoint.mq(variables.$feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } - @include mq($min-max-feature) { + @include breakpoint.mq(variables.$min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } - @include mq($arbitrary-feature-min-max) { + @include breakpoint.mq(variables.$arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } /* @include breakpoint-set('to ems', true); */ -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .min-max-feature-to-ems { - @include breakpoint($feature-min-max) { + @include breakpoint.breakpoint(variables.$feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } - @include breakpoint($min-max-feature) { + @include breakpoint.breakpoint(variables.$min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } - @include breakpoint($arbitrary-feature-min-max) { + @include breakpoint.breakpoint(variables.$arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } - @include mq($feature-min-max) { + @include breakpoint.mq(variables.$feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } - @include mq($min-max-feature) { + @include breakpoint.mq(variables.$min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } - @include mq($arbitrary-feature-min-max) { + @include breakpoint.mq(variables.$arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } diff --git a/tests/tests/06_multidemensional.scss b/tests/tests/06_multidemensional.scss index 65aabb9..2e0fcb5 100644 --- a/tests/tests/06_multidemensional.scss +++ b/tests/tests/06_multidemensional.scss @@ -1,29 +1,32 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * Multidimensional lists, * assume each item is a feature value pair - * $multidimensional : #{$multidimensional}; + * $multidimensional : #{variables.$multidimensional}; */ .multidimensional { - @include breakpoint($multidimensional) { + @include breakpoint.breakpoint(variables.$multidimensional) { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } - @include mq($multidimensional) { + @include breakpoint.mq(variables.$multidimensional) { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } } /* @include breakpoint-set('to ems', true); */ -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .multidimensional-to-ems { - @include breakpoint($multidimensional) { + @include breakpoint.breakpoint(variables.$multidimensional) { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } - @include mq($multidimensional) { + @include breakpoint.mq(variables.$multidimensional) { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } diff --git a/tests/tests/07_basic_or.scss b/tests/tests/07_basic_or.scss index 90331e9..7255fad 100644 --- a/tests/tests/07_basic_or.scss +++ b/tests/tests/07_basic_or.scss @@ -1,42 +1,46 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/respond-to'; +@use '../../stylesheets/breakpoint/settings'; + /* * 'OR' mediaqueries. * tests separated by commas - * $basic-or : #{$basic-or}; - * $basic-or-media : #{$basic-or-media}; + * $basic-or : #{variables.$basic-or}; + * $basic-or-media : #{variables.$basic-or-media}; */ .basic-or { - @include breakpoint($basic-or) { + @include breakpoint.breakpoint(variables.$basic-or) { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } - @include respond-to('basic or') { + @include respond-to.respond-to('basic or') { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } } .basic-or-media { - @include breakpoint($basic-or-media) { + @include breakpoint.breakpoint(variables.$basic-or-media) { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } - @include mq($basic-or) { + @include breakpoint.mq(variables.$basic-or) { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } - @include respond-to('basic or') { + @include respond-to.respond-to('basic or') { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } /* @include breakpoint-set('to ems', true); */ -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .basic-or-to-ems { - @include breakpoint($basic-or) { + @include breakpoint.breakpoint(variables.$basic-or) { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } - @include mq($basic-or) { + @include breakpoint.mq(variables.$basic-or) { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } diff --git a/tests/tests/08_one_sided_feature.scss b/tests/tests/08_one_sided_feature.scss index 549e888..9f36bf6 100644 --- a/tests/tests/08_one_sided_feature.scss +++ b/tests/tests/08_one_sided_feature.scss @@ -1,54 +1,57 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * One-sided features (ie. monochrome) - * $monochrome : #{$monochrome}; - * $monochrome-double : #{$monochrome-double}; - * $multidimensional-plus-one-sided : #{$multidimensional-plus-one-sided}; + * $monochrome : #{variables.$monochrome}; + * $monochrome-double : #{variables.$monochrome-double}; + * $multidimensional-plus-one-sided : #{variables.$multidimensional-plus-one-sided}; */ .one-sided { - @include breakpoint($monochrome) { + @include breakpoint.breakpoint(variables.$monochrome) { content: '$monochrome'; content: '@media (monochrome)'; } - @include breakpoint($monochrome-double) { + @include breakpoint.breakpoint(variables.$monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } - @include breakpoint($multidimensional-plus-one-sided) { + @include breakpoint.breakpoint(variables.$multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } - @include mq($monochrome) { + @include breakpoint.mq(variables.$monochrome) { content: '$monochrome'; content: '@media (monochrome)'; } - @include mq($monochrome-double) { + @include breakpoint.mq(variables.$monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } - @include mq($multidimensional-plus-one-sided) { + @include breakpoint.mq(variables.$multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } } /* @include breakpoint-set('to ems', true); */ -@include breakpoint-set('to ems', true); +@include settings.breakpoint-set('to ems', true); .one-sided-to-ems { - @include breakpoint($monochrome-double) { + @include breakpoint.breakpoint(variables.$monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } - @include breakpoint($multidimensional-plus-one-sided) { + @include breakpoint.breakpoint(variables.$multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } - @include mq($monochrome-double) { + @include breakpoint.mq(variables.$monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } - @include mq($multidimensional-plus-one-sided) { + @include breakpoint.mq(variables.$multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } diff --git a/tests/tests/09_not.scss b/tests/tests/09_not.scss index 0b10a0d..5598039 100644 --- a/tests/tests/09_not.scss +++ b/tests/tests/09_not.scss @@ -1,23 +1,26 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * One-sided features (ie. monochrome) - * $not : #{$not}; + * $not : #{variables.$not}; */ .not { - @include breakpoint($not) { + @include breakpoint.breakpoint(variables.$not) { content: '$not'; content: '@media not screen'; } - @include breakpoint($not-plus-default) { + @include breakpoint.breakpoint(variables.$not-plus-default) { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } - @include mq($not) { + @include breakpoint.mq(variables.$not) { content: '$not'; content: '@media not screen'; } - @include mq($not-plus-default) { + @include breakpoint.mq(variables.$not-plus-default) { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } diff --git a/tests/tests/10_double_string.scss b/tests/tests/10_double_string.scss index 4994742..0f1a6d7 100644 --- a/tests/tests/10_double_string.scss +++ b/tests/tests/10_double_string.scss @@ -1,24 +1,26 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; + /* * Double string feature (i.e. string: string) - * $aspect-ratio : #{$aspect-ratio}; - * $device-aspect-ratio : #{$device-aspect-ratio}; + * $aspect-ratio : #{variables.$aspect-ratio}; + * $device-aspect-ratio : #{variables.$device-aspect-ratio}; */ .aspect-ratio { - @include breakpoint($aspect-ratio) { + @include breakpoint.breakpoint(variables.$aspect-ratio) { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } - @include breakpoint($device-aspect-ratio) { + @include breakpoint.breakpoint(variables.$device-aspect-ratio) { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } - @include mq($aspect-ratio) { + @include breakpoint.mq(variables.$aspect-ratio) { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } - @include mq($device-aspect-ratio) { + @include breakpoint.mq(variables.$device-aspect-ratio) { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } diff --git a/tests/tests/11_legacy_syntax.scss b/tests/tests/11_legacy_syntax.scss index ad599ba..c81c5dd 100644 --- a/tests/tests/11_legacy_syntax.scss +++ b/tests/tests/11_legacy_syntax.scss @@ -1,16 +1,19 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /* * Legacy syntax */ -@include breakpoint-set('legacy syntax', true); +@include settings.breakpoint-set('legacy syntax', true); .legacy { - @include breakpoint($legacy) { + @include breakpoint.breakpoint(variables.$legacy) { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } - @include mq($legacy) { + @include breakpoint.mq(variables.$legacy) { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } diff --git a/tests/tests/12_breakpoint_resolutions.scss b/tests/tests/12_breakpoint_resolutions.scss index 8434c3d..0b411cd 100644 --- a/tests/tests/12_breakpoint_resolutions.scss +++ b/tests/tests/12_breakpoint_resolutions.scss @@ -1,32 +1,36 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/respond-to'; +@use '../../stylesheets/breakpoint/settings'; + /* * Resolution queries, device pixel ratio and standard resolution - * $device-pixel-ratio: #{$device-pixel-ratio} - * $resolution: #{$resolution} + * $device-pixel-ratio: #{variables.$device-pixel-ratio} + * $resolution: #{variables.$resolution} */ -@include breakpoint-set('transform resolutions', true); +@include settings.breakpoint-set('transform resolutions', true); .resolution { - @include breakpoint($device-pixel-ratio) { - content: $device-pixel-ratio; + @include breakpoint.breakpoint(variables.$device-pixel-ratio) { + content: variables.$device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } - @include breakpoint($resolution) { - content: $resolution; + @include breakpoint.breakpoint(variables.$resolution) { + content: variables.$resolution; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } - @include mq($device-pixel-ratio) { - content: $device-pixel-ratio; + @include breakpoint.mq(variables.$device-pixel-ratio) { + content: variables.$device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } - @include mq($resolution) { - content: $resolution; + @include breakpoint.mq(variables.$resolution) { + content: variables.$resolution; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } - @include respond-to('device pixel ratio') { - content: $device-pixel-ratio; + @include respond-to.respond-to('device pixel ratio') { + content: variables.$device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } diff --git a/tests/tests/13_context_simple.scss b/tests/tests/13_context_simple.scss index 13d437b..84cabd8 100644 --- a/tests/tests/13_context_simple.scss +++ b/tests/tests/13_context_simple.scss @@ -1,4 +1,6 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/context'; $context-simple: 500px; $context-single: monochrome; @@ -22,48 +24,48 @@ $context-complex: 500px, (screen) (500px 700px), (300px) (monochrome); * $context-complex: #{$context-complex} */ .context { - @include breakpoint($context-simple) { + @include breakpoint.breakpoint($context-simple) { content: '@media (min-width: 500px)'; - -min-width: breakpoint-get-context(min-width); + -min-width: context.breakpoint-get-context(min-width); } - @include breakpoint($context-single) { + @include breakpoint.breakpoint($context-single) { content: '@media (monochrome)'; - -monochrome: breakpoint-get-context(monochrome); + -monochrome: context.breakpoint-get-context(monochrome); } - @include breakpoint($context-and) { + @include breakpoint.breakpoint($context-and) { content: '@media (min-width: 500px) and (max-width: 700px)'; - -min-width: breakpoint-get-context(min-width); - -max-width: breakpoint-get-context(max-width); + -min-width: context.breakpoint-get-context(min-width); + -max-width: context.breakpoint-get-context(max-width); } - @include breakpoint($context-max) { + @include breakpoint.breakpoint($context-max) { content: '@media (max-width: 700px)'; - -max-width: breakpoint-get-context(max-width); + -max-width: context.breakpoint-get-context(max-width); } - @include breakpoint($context-string) { + @include breakpoint.breakpoint($context-string) { content: '@media (orientation: portrait)'; - -orientation: breakpoint-get-context(orientation); + -orientation: context.breakpoint-get-context(orientation); } - @include breakpoint($context-triple) { + @include breakpoint.breakpoint($context-triple) { content: '@media (min-height: 800px) and (max-height: 1000px)'; - -min-height: breakpoint-get-context(min-height); - -max-height: breakpoint-get-context(max-height); + -min-height: context.breakpoint-get-context(min-height); + -max-height: context.breakpoint-get-context(max-height); } - @include breakpoint($context-media-type) { + @include breakpoint.breakpoint($context-media-type) { content: '@media print'; - -media: breakpoint-get-context(media); + -media: context.breakpoint-get-context(media); } - @include breakpoint($context-or) { + @include breakpoint.breakpoint($context-or) { content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)'; - -min-width: breakpoint-get-context(min-width); - -max-width: breakpoint-get-context(max-width); - -max-height: breakpoint-get-context(max-height); - -orientation: breakpoint-get-context(orientation); + -min-width: context.breakpoint-get-context(min-width); + -max-width: context.breakpoint-get-context(max-width); + -max-height: context.breakpoint-get-context(max-height); + -orientation: context.breakpoint-get-context(orientation); } - @include breakpoint($context-complex) { + @include breakpoint.breakpoint($context-complex) { content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)'; - -min-width: breakpoint-get-context(min-width); - -max-width: breakpoint-get-context(max-width); - -media: breakpoint-get-context(media); - -monochrome: breakpoint-get-context(monochrome); + -min-width: context.breakpoint-get-context(min-width); + -max-width: context.breakpoint-get-context(max-width); + -media: context.breakpoint-get-context(media); + -monochrome: context.breakpoint-get-context(monochrome); } } diff --git a/tests/tests/14_context_complex.scss b/tests/tests/14_context_complex.scss index 237f196..434002e 100644 --- a/tests/tests/14_context_complex.scss +++ b/tests/tests/14_context_complex.scss @@ -1,4 +1,7 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/context'; + /** * Dynamic contexts. */ @@ -7,7 +10,7 @@ #dynamic { // What test do we want here? - @include breakpoint($dynamic-context) { + @include breakpoint.breakpoint(variables.$dynamic-context) { // What test do we want here? } } @@ -16,7 +19,7 @@ $multi-media: 300px, print, 200px; #multi-media { - @include breakpoint($multi-media) { - -media: breakpoint-get-context('media'); + @include breakpoint.breakpoint($multi-media) { + -media: context.breakpoint-get-context('media'); } } \ No newline at end of file diff --git a/tests/tests/15_no_query_fallback.scss b/tests/tests/15_no_query_fallback.scss index f19b3d3..d300ebe 100644 --- a/tests/tests/15_no_query_fallback.scss +++ b/tests/tests/15_no_query_fallback.scss @@ -1,22 +1,23 @@ +@use 'variables'; +@use '../../stylesheets/breakpoint'; +@use '../../stylesheets/breakpoint/settings'; + /** * IE no-query fallbacks. */ -@import "breakpoint"; -@include breakpoint-set('no queries', true); -@include breakpoint-set('no query fallbacks', '.no-mq'); - -@import '11_legacy_syntax'; +@include settings.breakpoint-set('no queries', true); +@include settings.breakpoint-set('no query fallbacks', '.no-mq'); /* * No Query */ .no-query { - @include breakpoint($no-query) { - _query: "#{$no-query}"; + @include breakpoint.breakpoint(variables.$no-query) { + _query: "#{variables.$no-query}"; _expected: "@media (min-width: 700px)"; } - @include mq($no-query) { - _query: "#{$no-query}"; + @include breakpoint.mq(variables.$no-query) { + _query: "#{variables.$no-query}"; _expected: "@media (min-width: 700px)"; } } \ No newline at end of file diff --git a/tests/tests/16_media.scss b/tests/tests/16_media.scss index c504b78..39eee74 100644 --- a/tests/tests/16_media.scss +++ b/tests/tests/16_media.scss @@ -1,61 +1,63 @@ -@import 'variables'; +@use 'variables'; +@use '../../stylesheets/breakpoint'; + /* * Media features (ie. tv) - * $simple-media : #{$simple-media}; - * $media-plus-default : #{$media-plus-default}; - * $media-plus-fence : #{$media-plus-fence}; - * $media-only : #{$media-only}; - * $media-not : #{$media-not}; - * $media-not-plus-fenced : #{$media-not-plus-fenced}; + * $simple-media : #{variables.$simple-media}; + * $media-plus-default : #{variables.$media-plus-default}; + * $media-plus-fence : #{variables.$media-plus-fence}; + * $media-only : #{variables.$media-only}; + * $media-not : #{variables.$media-not}; + * $media-not-plus-fenced : #{variables.$media-not-plus-fenced}; */ .media { - @include breakpoint($simple-media) { + @include breakpoint.breakpoint(variables.$simple-media) { content: '$simple-media'; content: '@media tv'; } - @include breakpoint($media-plus-default) { + @include breakpoint.breakpoint(variables.$media-plus-default) { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } - @include breakpoint($media-plus-fence) { + @include breakpoint.breakpoint(variables.$media-plus-fence) { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } - @include breakpoint($media-only) { + @include breakpoint.breakpoint(variables.$media-only) { content: '$media-only'; content: '@media only print'; } - @include breakpoint($media-not) { + @include breakpoint.breakpoint(variables.$media-not) { content: '$media-not)'; content: '@media not print'; } - @include breakpoint($media-not-plus-fenced) { + @include breakpoint.breakpoint(variables.$media-not-plus-fenced) { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } - @include mq($simple-media) { + @include breakpoint.mq(variables.$simple-media) { content: '$simple-media'; content: '@media tv'; } - @include mq($media-plus-default) { + @include breakpoint.mq(variables.$media-plus-default) { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } - @include mq($media-plus-fence) { + @include breakpoint.mq(variables.$media-plus-fence) { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } - @include mq($media-only) { + @include breakpoint.mq(variables.$media-only) { content: '$media-only'; content: '@media only print'; } - @include mq($media-not) { + @include breakpoint.mq(variables.$media-not) { content: '$media-not)'; content: '@media not print'; } - @include mq($media-not-plus-fenced) { + @include breakpoint.mq(variables.$media-not-plus-fenced) { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } diff --git a/tests/tests/17_breakpoint_function.scss b/tests/tests/17_breakpoint_function.scss index 1577f4b..db388b1 100644 --- a/tests/tests/17_breakpoint_function.scss +++ b/tests/tests/17_breakpoint_function.scss @@ -1,7 +1,8 @@ -@import "variables"; +@use 'variables'; +@use '../../stylesheets/breakpoint/parsers'; @mixin breakpoint-test-query($mq) { - $bkpt: breakpoint($mq); + $bkpt: parsers.breakpoint($mq); _query: inspect(map-get($bkpt, 'query')); _fallback: inspect(map-get($bkpt, 'fallback')); _context-holder: inspect(map-get($bkpt, 'context holder')); @@ -9,7 +10,7 @@ } @mixin breakpoint-test-context($mq, $contexts) { - $bkpt: breakpoint($mq, $contexts); + $bkpt: parsers.breakpoint($mq, $contexts); @each $k, $v in $bkpt { _#{$k}: inspect($v); } @@ -21,54 +22,54 @@ **/ .query { /* Single Pixel Value */ - _test: "breakpoint(#{$single-pixel-value})"; - @include breakpoint-test-query($single-pixel-value); + _test: "breakpoint(#{variables.$single-pixel-value})"; + @include breakpoint-test-query(variables.$single-pixel-value); /* Fenced with Media */ - _test: "breakpoint(#{$media-not-plus-fenced})"; - @include breakpoint-test-query($media-not-plus-fenced); + _test: "breakpoint(#{variables.$media-not-plus-fenced})"; + @include breakpoint-test-query(variables.$media-not-plus-fenced); /* Or Query */ - _test: "breakpoint(#{$dynamic-context})"; - @include breakpoint-test-query($dynamic-context); + _test: "breakpoint(#{variables.$dynamic-context})"; + @include breakpoint-test-query(variables.$dynamic-context); /* No Query */ - _test: "breakpoint(#{$no-query})"; - @include breakpoint-test-query($no-query); + _test: "breakpoint(#{variables.$no-query})"; + @include breakpoint-test-query(variables.$no-query); /* No Query, Or */ - _test: "breakpoint(#{$legacy})"; - @include breakpoint-test-query($legacy); + _test: "breakpoint(#{variables.$legacy})"; + @include breakpoint-test-query(variables.$legacy); } .context { /* Single Pixel Value */ - _test: "breakpoint(#{$single-pixel-value}, 'min-width')"; - $bkpt: breakpoint($single-pixel-value, 'min-width', 'height', 'no-query'); + _test: "breakpoint(#{variables.$single-pixel-value}, 'min-width')"; + $bkpt: parsers.breakpoint(variables.$single-pixel-value, 'min-width', 'height', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* Fenced with Media */ - _test: "breakpoint(#{$media-not-plus-fenced}, 'min-width', 'max-width', 'media')"; - $bkpt: breakpoint($media-not-plus-fenced, 'min-width', 'max-width', 'media'); + _test: "breakpoint(#{variables.$media-not-plus-fenced}, 'min-width', 'max-width', 'media')"; + $bkpt: parsers.breakpoint(variables.$media-not-plus-fenced, 'min-width', 'max-width', 'media'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* Or Query */ - _test: "breakpoint(#{$dynamic-context})"; - $bkpt: breakpoint($dynamic-context, 'min-width', 'min-height', 'orientation', 'no-query'); + _test: "breakpoint(#{variables.$dynamic-context})"; + $bkpt: parsers.breakpoint(variables.$dynamic-context, 'min-width', 'min-height', 'orientation', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* No Query */ - _test: "breakpoint(#{$no-query})"; - $bkpt: breakpoint($no-query, 'min-width', 'media', 'no-query'); + _test: "breakpoint(#{variables.$no-query})"; + $bkpt: parsers.breakpoint(variables.$no-query, 'min-width', 'media', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* No Query, Or */ - _test: "breakpoint(#{$legacy})"; - $bkpt: breakpoint($legacy, 'min-width', 'media', 'no-query'); + _test: "breakpoint(#{variables.$legacy})"; + $bkpt: parsers.breakpoint(variables.$legacy, 'min-width', 'media', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); diff --git a/tests/tests/32_no_query_fallback-memo.scss b/tests/tests/32_no_query_fallback-memo.scss index 868f0ef..74408a4 100644 --- a/tests/tests/32_no_query_fallback-memo.scss +++ b/tests/tests/32_no_query_fallback-memo.scss @@ -1,3 +1,3 @@ -@import "memo"; - -@import "15_no_query_fallback"; \ No newline at end of file +@use "15_no_query_fallback" with ( + $Memo-Exists: false +); \ No newline at end of file diff --git a/tests/tests/_variables.scss b/tests/tests/_variables.scss index 5f388e6..c1d9c86 100644 --- a/tests/tests/_variables.scss +++ b/tests/tests/_variables.scss @@ -1,11 +1,12 @@ -@import 'breakpoint'; +@use '../../stylesheets/breakpoint/respond-to'; +@use '../../stylesheets/breakpoint/settings'; $single-pixel-value: 500px; $single-em-value: 30em; -@include breakpoint-set('to ems', false); +@include settings.breakpoint-set('to ems', false); -@include add-breakpoint('single pixel value', $single-pixel-value); -@include add-breakpoint('single pixel value, em', $single-em-value); +@include respond-to.add-breakpoint('single pixel value', $single-pixel-value); +@include respond-to.add-breakpoint('single pixel value, em', $single-em-value); $feature-first: height 500px; $value-first: 500px height; @@ -22,7 +23,7 @@ $multidimensional: ($feature-first) ($feature-value-both-strings); $basic-or: max-width 350px, 500px 600px; $basic-or-media: 500px, tv 700px color; -@include add-breakpoint('basic or', $basic-or); +@include respond-to.add-breakpoint('basic or', $basic-or); $monochrome: monochrome; $monochrome-double: 300px monochrome; @@ -39,7 +40,7 @@ $legacy: 'not screen', 500px, 'no-query' '.no-mq'; $device-pixel-ratio: 'resolution' 2dppx; $resolution: 'min-resolution' 192dpi; -@include add-breakpoint('device pixel ratio', $device-pixel-ratio); +@include respond-to.add-breakpoint('device pixel ratio', $device-pixel-ratio); $dynamic-context: 400px ('min-height' 200px), (300px 325px) (orientation portriat) monochrome;