SCSSでのif文で条件分岐が出来ません

gulp にて、POSTCSSのassetsを用いて下記のようなSCSSを書きましたが、うまく動きません。

想定している動きは、@include chair(1, 2);で指定した2は縮小率です。

$local-Splitに指定の縮小率（数字）が入っている場合、縮小率をプロパティの場所に入れる（■1）

@include chair(1); のように何も$local-Splitに指定していない場合は、nullが入り（■2）オリジナルのサイズが出力（■３）される仕組みにしたいです。

要は、ちゃんとif文が書けないだけなんですが、詰まっています。
回避出来る問題ですが、ちゃんと身につけたく皆さまに御教授いただこうと思って投稿しました。

よろしくお願いします！！！！！！！！！！

scss
1@mixin chair(
2$local-num:1,
3$local-Split: null //■2
4) {
5  content: "";
6  position: absolute;
7  display: block;
8//■ここから
9  @if $local-Split == number {
10    width: width("parts-chair#{$local-num}.png", $local-Split);// ■1
11  }
12  @if $local-Split == null {
13    width: width("parts-chair#{$local-num}.png");//■３
14  }
15
16  @if $local-Split == number {
17    height: height("parts-chair#{$local-num}.png", $local-Split);// ■1
18  }
19  @if $local-Split == null {
20    height: height("parts-chair#{$local-num}.png");//■３
21  }
22//■ここまで
23  background: resolve("parts-chair#{$local-num}.png") 0 0 no-repeat;
24}

scss
1.example {
2  &::before {
3    @include chair(1, 2);
4    top: 70px;
5    left: 6%;
6  }
7}
8.example２ {
9  &::before {
10    @include chair(3);
11    top: 15px;
12    left: 1%;
13  }
14}

css
1.example::before {
2    content: "";
3    position: absolute;
4    display: block;
5    width: 105px;
6    height: 91.5px;
7    background: url(/assets/images/parts-chair1.png) 0 0 no-repeat;
8    top: 70px;
9    left: 6%;
10}
11.example2::before {
12    content: "";
13    position: absolute;
14    display: block;
15    width: 210px;
16    height: 183px;
17    background: url(/assets/images/parts-chair3.png) 0 0 no-repeat;
18    top: 15px;
19    left: 1%;
20}

※parts-chair1.pngのオリジナルサイズは、横210px縦183pxになります。

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。

scss
1@if #{type-of($local-Shrink)} == "number" {

こうやって真偽値を書けば良いんですね。

scss
1@mixin chair($local-num:1, $local-Shrink: null) {
2  content: "";
3  position: absolute;
4  display: block;
5  width: width("parts-chair#{$local-num}.png");
6  @if #{type-of($local-Shrink)} == "number" {
7    width: width("parts-chair#{$local-num}.png", $local-Shrink);
8  } @else {
9    width: width("parts-chair#{$local-num}.png");
10  }
11  @if #{type-of($local-Shrink)} == "number" {
12    height: height("parts-chair#{$local-num}.png", $local-Shrink);
13  } @else {
14    height: height("parts-chair#{$local-num}.png");
15  }
16
17  background: resolve("parts-chair#{$local-num}.png") 0 0 no-repeat;
18
19  @if #{type-of($local-Shrink)} == "number" {
20    background-size:
21      width("parts-chair#{$local-num}.png", $local-Shrink)
22      height("parts-chair#{$local-num}.png", $local-Shrink);
23  } @else {
24    background-size:
25      width("parts-chair#{$local-num}.png")
26      height("parts-chair#{$local-num}.png");
27  }
28}