Breakpoint 2.7.0 Syntax

Question

I had been using breakpoint 2.5 for quite sometime. I got a new Mac and setup breakpoint on it. I installed 2.7.0 Clearly there has been some changes between 2.5.0 and 2.7.0 of breakpoint.

Here is the contents of my breakpoint.scss file (ignore the px values, they are just random ones I typed in)

$breakpoint-to-ems: true;
$breakpoint-no-query-fallbacks: true;
$breakpoint-default-media: screen;

$xsmall:    320px;
$small: 480px;
$medium:    760px, 'no-query' '.lt-ie9';
$large: 960px, 'no-query' '.lt-ie9';
$xl:        1200px;
$mega:      1700px;

I would then call a mixin such as the following if I wanted to target the $medium breakpoint:

@include breakpoint($medium) {
        font-size: 60px;
}

Using that with breakpoint 2.5.0 was fine. Using it with 2.7.0 is causing several warnings.

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-default-media: {{setting}} to @include breakpoint-set('default media', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release.

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-to-ems: {{setting}} to @include breakpoint-set('to ems', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release.

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-queries: {{setting}} to @include breakpoint-set('no queries', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release.

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-query-fallbacks: {{setting}} to @include breakpoint-set('no query fallbacks', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release.

I was able to clear up those 3 fairly easily with a search of good old Google.

I changed

$breakpoint-to-ems: true;

to be

@include breakpoint-set('to ems', true);

I changed

$breakpoint-no-query-fallbacks: true;

to be

@include breakpoint-set('no query fallbacks', true);

I changed

$breakpoint-default-media: screen;

to be

@include breakpoint-set('default media', screen);

The issue I am having now is that every instance of the breakpoint mixin being used in my bluehive.scss file using the $medium or $large breakpoint, such as

@include breakpoint($medium) {
        font-size: 60px;
}

is throwing a warning:

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-queries: {{setting}} to @include breakpoint-set('no queries', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 62 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-query-fallbacks: {{setting}} to @include breakpoint-set('no query fallbacks', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 62 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-queries: {{setting}} to @include breakpoint-set('no queries', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 87 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-query-fallbacks: {{setting}} to @include breakpoint-set('no query fallbacks', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 87 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-queries: {{setting}} to @include breakpoint-set('no queries', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 90 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-query-fallbacks: {{setting}} to @include breakpoint-set('no query fallbacks', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 90 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-queries: {{setting}} to @include breakpoint-set('no queries', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 99 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of $breakpoint-no-query-fallbacks: {{setting}} to @include breakpoint-set('no query fallbacks', {{setting}}). Variable settings, as well as this warning will be deprecated in a future release. on line 16 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss, in legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, inbreakpoint' from line 99 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss from line 14 of /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles.scss

Is there a new way of declaring and using the breakpoints in version 2.7.0 ? I've been unable to find anything which says that this has changed.

Thank you :-)

Answer 1

Try including @import "breakpoint"; in your styles.scss, after use

@include breakpoint-set('no queries', true); @include breakpoint-set('no query fallbacks', true);