@mixin 변수의 기본값 오류?!

🧐mixin을 사용할 때도 함수처럼 인자를 전달해서 include시 사용할 수 있는데 인자에 기본값을 설정하면 사용시 따로 값을 전달하지 않으면 mixin생성시 작성한 인자의 순서에 관계없이 기본값이 적용된다고 한다. 근데 실제로 작성해보는데 계속 순서에 맞게 값이 들어가서 알맞는 값으로 들어가지 못해 제대로 된 적용이 되지 않았다.

 

난 우ㅐ,,,왜 안되지,,,,,,,,

// Variables
$color-white: #fff;
$color-black: #000;
$color-primary: #00BC70;
$font-size: 14px;

// 텍스트 스타일 믹스
@mixin text-style($font-size, $font-weight: 400, $color: $color-black) {
  font-size: $font-size;
  font-weight: $font-weight;
  color: $color;
}

p{
  @include text-style(12px, $color: $color-primary);
}

이렇게 됬을때 컴파일 결과가

p{
  font-size: 12px;
  font-weight: 400;
  color: #00BC70;
}

이렇게 되어야 하는데 

두번째 인자에 세번째 인자값으로 넣은 값이 들어가서 계속 오류가 났다. 구글링해도 다들 된다는데 나는 왜 안되지,,

---

🫡해결방안으로 정확한 값을 전달해줄 수 있도록 순서가 맞지 않거나 기본값을 사용해서 추가로 작성할 필요가 없다고 하면 인자에 값을 넣어주었다. 

p{
  @include text-style(12px, $color: $color-primary);
}

 

이유는,, 아직 알 수 없으나 명확하게 작성해서 좋기도 한거 같기도,,?

 

➕추가로 include로 만든 mixin을 사용할 때 기본값이 부여된 상태여야 이 역시도 오류가 안난다.  값이야 원하는 값으로 사용시에 넣어주면 되니까 이 역시도 당연한걸지두,,,,?

// Button Element Style Mixin
@mixin btn-style(
  $width: auto,
  $height: auto,
  $back-img: none,
  $back-color: none,
  $cursor: pointer
) {
  border: none;
  outline: none;
  width: $width;
  height: $height;
  background: $back-img no-repeat center center;
  background-color: $back-color;
  cursor: $cursor;
}

기본값이 있는 속성들이라면 그냥 그 기본값을 넣어놓으면 될 듯?

button{
  @include btn-style($height: 30px, $back-color: $color-white);
}