サスはパーセントマイナスピクセルを計算します

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

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

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

calc()代わりに使用する必要があります。 ブラウザーの互換性を確認できますか？

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

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

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

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

calcSCSS [コンパイル時]とCSS [ランタイム]の両方に関数があります。後者ではなく前者を呼び出す可能性があります。

明らかな理由により、混合ユニットはコンパイル時に機能しませんが、実行時には機能します。

後者unquoteは、SCSS関数のを使用して強制できます。

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

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

IFあなたは、コンテナの幅を知って、あなたは次のように行うことができます：

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

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

古いスレッドを復活させて申し訳ありません-：after疑似セレクターを使用したCompassのストレッチは、目的に合う可能性があります。画面の左から（50％+ 10px）までの幅をdivで埋める場合は、（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を加えたものに引き伸ばされます。

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

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