27

動画のレスポンシブ グリッドを作成しようとしています。メディア クエリごとに異なる % を使用する代わりに、幅 100% に基づいて計算する標準の SASS 式を使用したいと考えていましたが、SASS がこれを実行できるかどうかはわかりません。以下の式の 40 は、2 x 20px の固定余白を考慮に入れています (つまり、これは 3 列のグリッドになります)。

理想的な式:

ul.videos {
  li {
     width: ((100% / 3) - 40);
  }
}

CSS/SASS がこれを処理できる方法はありますか? 可能であれば、JS を使用しないことをお勧めします。

4

3 に答える 3

55

これは、を使用するすべての主要なブラウザーcalc()で可能です。

デモ: http://jsfiddle.net/gb5HM/ 

li {
    display: inline-block;
    width: calc(100% / 3 - 40px);
}

もちろん、これを SASS ファイルで宣言することもできますが、これは純粋な CSS ソリューションです。SASS では、スタイルシートの生成時に 100% が何であるかがわからず、ドキュメントのサイズが変更されると 100% のピクセル値が変動する可能性があるため、SASS では不可能です。

仕様: http://www.w3.org/TR/css3-values/#calc

于 2013-09-26T02:52:27.647 に答える
2

もう 1 つの新しいブラウザー ソリューションは、flexbox 表示タイプを使用することです。calc()と同程度のサポートがあるようです (実際には非常に最近のブラウザーのみ)。

Sass、より具体的には Compass は、flexbox mixinsを持っているので、ここで役に立ちます。

于 2013-09-26T18:32:59.077 に答える