问题标签 [breakpoint-sass]

我正在尝试为网格定义一些默认行为，然后在特定断点处覆盖它们。在下面的示例中，我希望两个 div 堆叠在一起，稍微修改默认的装订线设置，然后在 800px 及以上我希望 div 彼此相邻堆叠。第二部分不会发生。似乎将小于 800 像素场景的一些边距设置应用于大于 800 像素的场景。请让我知道如何编写代码并遵守 susy 最佳实践。

HTML：

SCSS：

我还制作了一个 codepen 示例，可以在这里找到：

http://codepen.io/sbonham/pen/vLKvMJ

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

这是我的 breakpoint.scss 文件的内容（忽略 px 值，它们只是我输入的随机值）

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

将其与断点 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 断点，例如

正在发出警告：

警告：为了避免变量命名空间冲突，我们更新了更改断点设置的方法。$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 版本中是否有一种声明和使用断点的新方法？我一直找不到任何表明这种情况已经改变的东西。

谢谢 ：-）

我已经安装了 susy 和 sass，并在 webpack 配置中设置了 css/sass 加载器：

这是我的主要 scss 文件：

这是 webpack 输出中的错误

有谁知道如何正确@import断点？

嗨，我正在尝试让断点 sass 在我的 Gulp 设置中与 susy 一起工作

我已经运行 npm install breakpoint-sass --save-dev 并使用 @import "./node_modules/breakpoint-sass/stylesheets/breakpoint" 将它链接到我的 sass 文件的顶部；（susy 在 @import "./node_modules/susy/sass/susy" 中运行良好；）

我的 gulp sass 任务是这样的

和我的 scss 部分

h1 标签在所有屏幕宽度上都是红色的，而不是绿色的。我不明白为什么会这样。我之前在一个带有 ruby​​ 的 grunt 项目中使用过断点并且没有任何问题。

谢谢

当我按照说明安装断点后在我的项目中做指南针手表时，我得到了这个：

我不知道我需要更新什么以及如何更新。安装说明一开始就写得不太好，因为至少有几件事必须在别处查找才能弄清楚他们在说什么。

我使用推荐的方法使用 bundle 安装断点，它仍然不起作用。

如何用 sass 断点实现这个媒体查询？...

我已经尝试过了，但它也会影响桌面版本......

我想隐藏所有屏幕尺寸的导航栏，除了 480 像素和更小的屏幕尺寸，我希望显示“汉堡包”。我怎样才能做到这一点？谢谢你。

我使用 Foundation 6 开始了一个新项目，但有一个问题我无法解决。我的 Topbar 有很多链接，当涉及到 <= 800px 时，topbar 会分成两列，所以它看起来不再那么好了。现在我想添加一个新断点并将 data-hide-for 值设置为这个新断点。

但是当我出于测试目的将 _settings.scss 中的中断点从 640px 更改为 800px 时，顶栏仍然在 640px 处中断，就像我没有更改任何内容一样。

有人可以解决我的问题吗？

我不是 100% 清楚如何为仅移动视图实现与桌面视图不同的图像

例如，如果我有这个桌面图像：

它来自我有以下代码的mixin文件：

不知道添加什么逻辑会告诉我的应用程序呈现一些东西，而不是old-pic.jpg用户在手机上查看它。

尝试自定义以下 SASS mixin。现在它正在为每个断点创建相同的 CSS 集，但是，当我到达“sm”和“xs”断点时，我希望 mixin 稍微更改代码（请参阅下面的代码更改）。

在“sm”断点处，我希望它更改公式以读取...

在“xs”断点处，我希望它更改公式以读取...