bootstrapで.containerに設定しているwidthを取得する関数を作りたい

Question

やりたいこと

ある要素の幅を
bootstrapで.containerに設定しているwidthを基に、'calc()'で計算して設定したいです。

イメージは↓のような感じです。

td {
  width: calc(#{getContainerWidth()} - #{$thWidth});
}

試したこと

1. 関数作成

下記のように記述しましたが、コンパイル時に展開されてしまうので
いつも1170pxが返ってきます。

@function getContainerWidth() {
    @if (min-width: 1200px) {
        @return (1170px);
    } @else if (min-width: 992px) {
        @return (970px);
    } @else if (min-width: 768px) {
        @return (750px);
    } @else if (min-width: 576px) {
        @return (540px);
    } @else {
        @return 100vw;
    }
}

1. @mixinを使う

bootstrapと同じような形で展開される、@mixinを作りました。

@mixin setWidth($selector, $class, $property, $func) {
    @each $min-width in 576px, 768px, 992px, 1200px {
        @media (min-width: $min-width) {
            #{$selector}.#{$class} {
                @if $min-width == 576px { #{$property}: #{$func}(540px); }
                @else if $min-width == 768px { #{$property}: #{$func}(750px); }
                @else if $min-width == 992px { #{$property}: #{$func}(970px); }
                @else if $min-width == 1200px { #{$property}: #{$func}(1170px); }
                @else { $property: 100vw; }
            }
        }
    }
}

第4引数には関数を設定して、任意の計算をしたいです。
以下のような関数を用意しました。

@function func($value) {
    @return calc(#{$value} - #{$thWidth});
}

以下のように呼び出しました。

@include setWidth(td, test, width, func);

結果は@mixin内のfuncが思ったように展開されず、以下のようになりました。
func以外は思ったようにできました。

      @media (min-width: 576px) {
        td.test {
          width: func540px; } }
      @media (min-width: 768px) {
        td.test {
          width: func750px; } }
      @media (min-width: 992px) {
        td.test {
          width: func970px; } }
      @media (min-width: 1200px) {
        td.test {
          width: func1170px; } }

以下、参考にしたbootstrapの記述です。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Comments

[x_x]

何をしたいのか伝わらないのですが、もしかしてブラウザに表示してから取得しようとしていますか？

[akarin]

css上で取得したいです。.containerに設定する幅をもとにcalc()の計算で使いたいです。

Answer 1

Bootstrap 4ではなく3を使っているようなので、以降3での説明になります。
Bootstrap 3 の該当箇所のSCSSは次のようになっています。

_grid.scss

.container {
  @include container-fixed;

  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

なので、SCSSで書くならこのまま$container-sm、$container-md、$container-lgを参照して書けばいいです。
が、CSSのcalc()で？ということになると、あらかじめ出力しておかなければならないでしょう。

:root {
  --container-sm: $container-sm;
  --container-md: $container-md;
  --container-lg: $container-lg;
}

@media (min-width: 768px) {
  .hoge {
    width: calc(var(--container-sm) - 20px);
  }
}

@media (min-width: 992px) {
  .hoge {
    width: calc(var(--container-md) - 20px);
  }
}

@media (min-width: 1200px) {
  .hoge {
    width: calc(var(--container-lg) - 20px);
  }
}

Comments

[akarin]

ご回答ありがとうございます。
calc()のところを他の任意の式でも置き換えられるようにしたいです。

[x_x]

.hogeもwidthも-20pxも単なる例なのでお好きなように