問題タブ [breakpoint-sass]

私はかなり長い間ブレークポイント 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}}ください@include breakpoint-set('default media', {{setting}})。変数の設定とこの警告は、将来のリリースで廃止される予定です。

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-to-ems: {{setting}}ください@include breakpoint-set('to ems', {{setting}})。変数の設定とこの警告は、将来のリリースで廃止される予定です。

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-no-queries: {{setting}}ください@include breakpoint-set('no queries', {{setting}})。変数の設定とこの警告は、将来のリリースで廃止される予定です。

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-no-query-fallbacks: {{setting}}ください@include breakpoint-set('no query fallbacks', {{setting}})。変数の設定とこの警告は、将来のリリースで廃止される予定です。

古き良きGoogleの検索で、これら3つをかなり簡単にクリアできました。

私が変更され

$breakpoint-to-ems: true;

することが

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

私が変更され

$breakpoint-no-query-fallbacks: true;

することが

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

私が変更され

$breakpoint-default-media: スクリーン;

することが

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

私が今抱えている問題は、次のような $medium または $large ブレークポイントを使用して、私の bluehive.scss ファイルで使用されているブレークポイント mixin のすべてのインスタンスです。

警告を投げています：

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-no-queries: {{setting}}ください@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}}ください @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}}ください@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}}ください @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}}ください@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 行目のブレークポイント内/Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles の 14 行目の Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss。 scss

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-no-query-fallbacks: {{setting}}ください @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 行目のブレークポイント内/Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles の 14 行目の Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss。 scss

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-no-queries: {{setting}}ください@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 行目のブレークポイント内/Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles の 14 行目の Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss。 scss

警告: 変数の名前空間の衝突を避けるために、ブレークポイントの設定を変更する方法を更新しました。のすべてのインスタンスを に変更して$breakpoint-no-query-fallbacks: {{setting}}ください @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 行目のブレークポイント内/Users/chadwarren/Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/styles の 14 行目の Dropbox/Bluehive Interactive/Website 2016/Theme/bluehiveinteractive-2016/assets/scss/_bluehive.scss。 scss

バージョン 2.7.0 でブレークポイントを宣言して使用する新しい方法はありますか? これが変更されたと言うものを見つけることができませんでした。

ありがとうございました ：-）

I've installed susy and sass, and set up the css/sass loader in the webpack config:

Here is my main scss file:

This is an error in a webpack output

Does anyone know how to properly @import breakpoint ?

こんにちは、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 を使用したうなり声プロジェクトで以前にブレークポイントを使用したことがありますが、問題はありませんでした。

ありがとう

ブレークポイントをインストールする手順に従ってプロジェクトでコンパス ウォッチを実行すると、次のようになります。

何をどのように更新する必要があるのか​​ わかりません。インストール手順は、そもそも正確によく書かれているわけではありません。なぜなら、彼らが何を言っているのかを理解するために、少なくともいくつかのことを他の場所で調べなければならないからです。

推奨される方法でバンドルを使用してブレークポイントをインストールしましたが、それでも機能しません。

デスクトップ ビュー用とは異なるモバイル専用ビュー用の画像を実装する方法については、100% 明確ではありません。

たとえば、デスクトップ用にこの画像がある場合:

これは、私がこのコードを持っている mixin ファイルから来ています:

old-pic.jpgユーザーが携帯電話で表示している場合を除き、アプリケーションに何かをレンダリングするように指示する追加ロジックがわかりません。