CSS calc()関数のSass変数


1346

calc()Sassスタイルシートで関数を使用しようとしていますが、いくつか問題があります。これが私のコードです:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

変数の50px代わりにリテラルを使用すると、body_padding必要なものが正確に得られます。ただし、変数に切り替えると、次のようになります。

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

calc関数内の変数を置き換える必要があることをSassに認識させるにはどうすればよいですか?


10
Mixa

19
@ user3705055単位が異なるため、Sassは100%-50pxを計算できないため、計算が必要です。これは、値を追加する前に100%をpxに変換するためにコンテナの大きさがわかると、ブラウザでのみ計算できます。これが、calcが存在する正確な理由です。
Mog0

回答:


2544

補間

body
    height: calc(100% - #{$body_padding})

この場合、border-boxでも十分です。

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

3
box-sizing: border-box;もちろん、私の意見では、理想的な方法です。一般に、ボックスサイジングモデルはtを作成する必要があります
Brandito

どうもありがとう!私はcssルートを使用しようとしていましたcalc(100% - var(--body_padding))
Sylar

51

高さプロパティの$variables内部で使用するcalc()には:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

11
これは、ほぼ5年前から受け入れられた回答に何を追加しますか?
random_user_name

6
どういうわけか、私はこの答えをより明確にしています。私は多くのscss作業を行わないので、これは「平易な」ものであり、理解しやすいものでした。
2b77bee6-5445-4c77-b1eb-4df3e5

4
これは、受け入れられているよりも明らかに明確な答えです。「補間:」は私には何も意味しませんでした。
ジャックマシュー

3
@JacquesMathieu sass-lang.com/documentation/interpolation- それがあなたにとって何も意味がなく、非常に多くの票を集めた答えである場合、おそらくあなたは大騒ぎが何についてであるかを理解する必要があります。ちょうど私の2セント...
A. Chiesa

1
@A。Chiesa確かに、それは補間を定義します。しかし、OPと私はSASSでの補間について知りませんでした。さもなければ、この質問は決して尋ねられなかったでしょう。したがって、定義がないと前に聞いたことがない単語を口にするだけでも、そのようなふりをしても、包括的な回答を作成するのに役立ちません。そのリンクは確かに役立ちます。受け入れられた答えでそれを見て良かったでしょう。
ジャックマシュー

9

直接関係はありませんが。しかし、スペースを適切に配置しないと、CALCコードが機能しないことがわかりました。

これは私にはうまくいきませんでした calc(#{$a}+7px)

しかし、これはうまくいった calc(#{$a} + 7px)

これを理解するためにいつか私を取りました。


2

私はこれを試した後、問題を修正しました。すべてのメディアブレークポイントを指定されたレート(ベースサイズ/レートサイズ)で自動的に計算します


$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

0

SASS / SCSSと数式のスタイルを使用した本当に簡単なソリューションを次に示します。

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
  }

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

結論するには、私は強くあなたが理解することをお勧めtransform-originrotate()skew()

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/


-2

あなたはあなたの言葉を使うことができます #{your verbal}


3
これは奇妙な答えのようです。私はあなたが意味していると思いますvariableが、OPは変数が何であるか($body_paddingコードで指定されている)を知っているとすると、あなたの答えは何を追加しますか?
マイクプール

私は答えを与えています
Girraj

-6

これを試して:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

3
これは上記の受け入れられた答えよりもどのように優れていますか?同じことすらしていないようですが…?
Jules
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.