sass - パーセンテージ幅のレスポンシブレイアウトにコンパス/sassを使用していますか？

Question

Sass（およびCompass）を使用して、パーセンテージ幅のレイアウトの作成を簡素化しようとしています。

A List Apart ofの式を使用してtarget/context=result、コンテキストが980px、デザイン幅が640pxである場合、次のルールを実行してみました。

#leftcol {
width: ((640/980)*100%);
}

コンパイルする

#leftcol {
  width: 65.306%;
}

何度も入力せずにそれを行うよりも簡単な方法はありますか？

score 10 · Accepted Answer

ミックスインは必要ありません。Sassには、さまざまな単位を受け入れるパーセント関数が組み込まれています。

width: percentage(640 / 980)
width: percentage(640px / 980px)

両方の結果：

width: 65.30612%

score 2 · Accepted Answer

私はそれを理解しました、私はミックスインを作りました：

@mixin flex($target, $context){
width: (($target/$context)*100%);
}

そしてそれを使用します

#leftcol {
@include flex(640, 980);
}

score 0 · Accepted Answer

sassでは関数の定義も可能です（たとえば、w / min-widthとwidthを使用したり、他の部分式の一部として使用したりできます）。

@function flex-width($target, $context) {
    @return (($target/$context)*100%);
}

#leftcol {
    width: flex-width(640, 980);
}

3 に答える 3