css - 測定単位の前にSassがスペースを追加するのを止めるにはどうすればよいですか？

Question

レスポンシブレイアウトデザインについてこのチュートリアルに従おうとしていますが、基本仕様言語としてSASS/SCSSを使用しています。

そのために、次のSCSSを定義しました。

body {
  font: 100%/1.5;
}

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16)em;
  line-height:(28 / $h1_size)em;
  margin-top: (24 / $h1_size)em;
}

残念ながら、sassCSS形式への出力は次のようになります。

h1 {
  font-size: 1.5 em;
  line-height: 1.167 em;
  margin-top: 1 em;
}

—単位は値からスペースで区切られます。Chromeはこれらの値を無効として拒否し、手動でスペースを削除した場合にのみ使用します。

SCSSを微調整するか、オプションをに渡すことで、この問題を解決する方法はありますsassか？

これまでのところ、私は試しました：

計算内に単位を配置します。
- （font-size: ($h1_size / 16em)）=>構文エラー
- （font-size: (($h1_size)em / 16)=>font-size: 24 em/16;これは私が修正しようとしているのと同じ問題です

score 32 · Accepted Answer

emを定義にプッシュでき$h1_sizeます。これにより、16で除算して、結果を。にすることができますems。

分割の両側がにある場合em、結果は単位がありません。必要に応じて、簡単に乗算し1emてユニットを元に戻すことができます。

h1 {
  $h1_size: 24em;
  font-size: ($h1_size / 16);
  line-height:(28em / $h1_size);
  margin-top: (24em / $h1_size * 1em);
}

を掛ける1emと、元の例の作業に近いものを作成することもできます。1em通常、物事を単位なしに保つことができ、その後、単位を表示したいときにのみ乗算します。これにより、私の最初の例での無意味なem増殖の一部が回避されます。

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16 * 1em);
  line-height:(28 / $h1_size);
  margin-top: (24 / $h1_size * 1em);
}

どちらの方法がより理にかなっているのかは、ほとんどの場合、出力がほとんど1つのユニットにあるのか、それともあらゆる種類の異なるユニット（なしを含む）にあるのかによって異なります。

score 28 · Accepted Answer

+でスペースを削除できます

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16)+em;
  line-height:(28 / $h1_size)+em;
  margin-top: (24 / $h1_size)+em;
}

出力します。

h1 {
  font-size: 1.5em;
  line-height: 1.16667em;
  margin-top: 1em; }

score 6 · Accepted Answer

次のように文字列補間を使用する必要があります：＃{$ variable} em

score 2 · Accepted Answer

2

emを変数に入れるので、$h1_size: 24em;

于 2012-06-05T01:36:32.953 に答える

4 に答える 4