1

我使用断点 2.5 已经有一段时间了。我有一个新的 Mac 并在上面设置断点。我安装了 2.7.0 显然 2.5.0 和 2.7.0 之间的断点发生了一些变化。

这是我的 breakpoint.scss 文件的内容(忽略 px 值,它们只是我输入的随机值)

$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;

如果我想定位 $medium 断点,我会调用如下的 mixin:

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

将其与断点 2.5.0 一起使用很好。将它与 2.7.0 一起使用会导致几个警告。

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-default-media: {{setting}}请更改to的所有实例@include breakpoint-set('default media', {{setting}})。变量设置以及此警告将在未来版本中弃用。

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-to-ems: {{setting}}请更改to的所有实例@include breakpoint-set('to ems', {{setting}})。变量设置以及此警告将在未来版本中弃用。

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-queries: {{setting}}请更改to的所有实例@include breakpoint-set('no queries', {{setting}})。变量设置以及此警告将在未来版本中弃用。

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-query-fallbacks: {{setting}}请更改to的所有实例@include breakpoint-set('no query fallbacks', {{setting}})。变量设置以及此警告将在未来版本中弃用。

通过搜索良好的旧谷歌,我能够相当容易地清除这 3 个。

我变了

$breakpoint-to-ems: true;

成为

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

我变了

$breakpoint-no-query-fallbacks: true;

成为

@include breakpoint-set('没有查询回退', true);

我变了

$断点默认媒体:屏幕;

成为

@include breakpoint-set('默认媒体', screen);

我现在遇到的问题是,我的 bluehive.scss 文件中使用的断点混合的每个实例都使用 $medium 或 $large 断点,例如

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

正在发出警告:

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-queries: {{setting}}请更改to的所有实例@include breakpoint-set('no queries', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 第 62 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-query-fallbacks: {{setting}}请更改to 的所有实例@include breakpoint-set('no query fallbacks', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 第 62 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-queries: {{setting}}请更改to的所有实例@include breakpoint-set('no queries', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 的第 87 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-query-fallbacks: {{setting}}请更改to 的所有实例@include breakpoint-set('no query fallbacks', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 的第 87 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-queries: {{setting}}请更改to的所有实例@include breakpoint-set('no queries', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 第 90 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-query-fallbacks: {{setting}}请更改to 的所有实例@include breakpoint-set('no query fallbacks', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 第 90 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-queries: {{setting}}请更改to的所有实例@include breakpoint-set('no queries', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 第 99 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

警告:为了避免变量命名空间冲突,我们更新了更改断点设置的方法。$breakpoint-no-query-fallbacks: {{setting}}请更改to 的所有实例@include breakpoint-set('no query fallbacks', {{setting}})。变量设置以及此警告将在未来版本中弃用。在 /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/breakpoint/_legacy-settings.scss 的第 16 行,在legacy-settings-warning' from line 41 of /Users/chadwarren/.rvm/gems/ruby-2.3.0/gems/breakpoint-2.7.0/stylesheets/_breakpoint.scss, in/Users/chadwarren/ 第 99 行的断点中Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss 来自 /Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles 的第 14 行。 scss

在 2.7.0 版本中是否有一种声明和使用断点的新方法?我一直找不到任何表明这种情况已经改变的东西。

谢谢 :-)

4

1 回答 1

0

尝试@import "breakpoint";在你的styles.scss中包含,使用后

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

于 2016-09-05T14:45:42.733 回答