scss（sass）のmixinのif文の中で変数が取得出来ない

Question

以下のscssのmixinで、$vul-mzの箇所でエラーが返ってきてしまいます。

if文の中だと$vul-mzを取得できていないみたいで、-ms-flex-pack: #{$vul-mz};の一行上で$vul-mzを定義すると何故かうまくいきました。。。

どなたかご教授お願い致します。

---

scss

@mixin justify-content($vul){
	@if $vul == a {
		$vul: space-around;
		$vul-mz: justify;
	} @else if $vul == b {
		$vul: space-between;
		$vul-mz: justify;
	} @else if $vul == c {
		$vul: center;
		$vul-mz: #{$vul};
	} @else if $vul == e {
		$vul: flex-end;
		$vul-mz: end;
	} @else if $vul == s {
		$vul: flex-start;
		$vul-mz: start;
	}
	-ms-flex-pack: #{$vul-mz};
	-webkit-justify-content: #{$vul};
	justify-content: #{$vul};
}

エラー内容

Undefined variable: "$vul-mz"

Answer 1

スコープ外で使われているからですね。
ifの前で、あらかじめ、$vul-mz: "";を宣言しておけば問題ないかと。

@mixin justify-content($vul){
    $vul-mz: "";
    @if $vul == a {
      ....

https://qiita.com/butchi_y/items/bc7aae615e7bc3ac7900

Comments

[退会済みユーザー]

そのようなルールがあるとは知りませんでした、、、ありがとうございました。