0

メディアクエリで変数を使用しようとしています-

$break-small: 320px;
$break-large: 1200px;

.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: $break-small) {
    width: 100px;
    float: none;
  }
  @media screen and (min-width: $break-large) {
    float: right;
  }
}

この記事で可能になったと書いてあります

エラーをスローしています-

Invalid CSS after "...nd (max-width: ": expected expression (e.g. 1px, bold), was "$break-small)

私のgemファイル-

gem 'sass-rails',   '~> 3.2.3'

sass-rails gem v3.2.3はsassgemの背後にありますか？それとも私は明らかな何かを見逃していますか？

4

3 に答える 3

1

私自身の質問に答えるために -

Gemfile.lock を調べたところ、次のものがありました - 

sass (3.1.20)
sass-rails (3.2.5)

その後、sassを正しいバージョンに更新する「bundle update sass」を実行しました。

メディア クエリの変数が期待どおりに機能するようになりました。

于 2012-08-30T08:41:35.660 に答える
0

あなたが使用しているのと同じgemを使用して、新しいRailsプロジェクトでこれとまったく同じスタイルを試してみましたが、魅力的です。したがって、ここでの私の推測では'sass'、ファイルの拡張子を使用しており、 'scss'.

両者の構文は互換性がないため、ファイル名を (たとえば)'mystyle.css.sass'から'mystyle.css.scss'

于 2012-08-29T16:32:48.607 に答える
0

これを試して：

@mixin breakpoint($point) {
  @if $point == break-small {
    @media only screen and (max-width: 320px) { @content; }
  }
  @else if $point == break-large {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

次のように参照します。

.profile-pic {
  float: left;
  width: 250px;
  @include breakpoint(break-small) {
    width: 100px;
    float: none;
  }
  @include breakpoint(break-large) {
    float: right;
  }
}
于 2012-08-29T18:10:28.873 に答える