sass - Sassはパーセントからピクセルを引いたものを計算します

Question

私は次のことができるようになりたいです：

height: 25% - 5px;

明らかに、それを行うとエラーが発生します。

Incompatible units: 'px' and '%'.

score 287 · Accepted Answer

Sassは、ある単位から次の単位に変換できない値に対して算術演算を実行できません。Sassには、ピクセルやその他の単位で「100％」の幅を正確に知る方法がありません。それはブラウザだけが知っていることです。

calc()代わりに使用する必要があります。ブラウザの互換性を確認してください...

.foo {
    height: calc(25% - 5px);
}

値が変数に含まれている場合は、補間を使用してそれらを文字列に変換する必要があります（そうでない場合、Sassは算術演算を実行しようとします）。

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

score 28 · Accepted Answer

calcSCSS[コンパイル時]とCSS[実行時]の両方に機能があります。後者の代わりに前者を呼び出す可能性があります。

明らかな理由で、ミキシングユニットはコンパイル時に機能しませんが、実行時に機能します。

unquoteSCSS関数を使用して、後者を強制することができます。

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

score 15 · Accepted Answer

15

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

于 2015-08-16T02:41:39.997 に答える

score 7 · Accepted Answer

コンテナの幅がわかっている場合は、次のようにすることができます。

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

多くの場合、＃containerは相対的な幅を持つ可能性があることを認識しています。その後、これは機能しません。

score 2 · Accepted Answer

古いスレッドを復活させて申し訳ありません-：after疑似セレクターを使用したコンパスのストレッチはあなたの目的に合うかもしれません-例えば。divで画面の左から（50％+ 10px）までの幅を埋める場合は、（SASSインデント構文で）使用できます。

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

：after要素は.exampleの右側の50％を埋め（.exampleの幅に50％を残します）、.exampleはその幅に10pxを加えたものに引き伸ばされます。

score 1 · Accepted Answer

パーセント値を変数に追加して、#{$variable} たとえば

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}

6 に答える 6