[HTML]Sass, @Mixin 사용하기

 @Mixin()사용하기

---

 

@Mixin은 함수와 같은 기능을 한다

사용 하는 방법은 @expend와 비슷하지만 %임시변수가 아닌

@mixin font_void() {
  width: 200px;
  height: 200px;
  padding: 20px;
}

  .box-green {
    @include box_size();
  }
  .box-blue {
    @include box_size();
  }
  .box-red  {
    @include box_size();
  }

@mixin 함수명(){}

함수를 불러오는 방법은 @include 함수명(); 을 사용해서 불러온다

 

위와 같이 코드를 작성하면

@expend를 사용하는 것과 같은데

@mixin() 을 사용하면 코드를 가변적으로 만들수 있다

박스의 크기가 동일하게 나와버린다

 

각각의 사이즈를 다르게 해주기 위해서

매개변수를 추가 해주어야한다

 

@mixin box_size($W, $H, $P, $size) {
  width: $W;
  height: $H;
  padding: $P;
  background-color: $size;
}

다음과 같이 (괄호)안에 $매개값 을 넣어주고

태그에 매개변수 값을 넣어준다

  width: $W;

 

그리고 @include 값을 매개 변수값에 맞춰서 적용해 준다

  .box-green {
    @include box_size(200px, 200px, 20px, green);
  }
  .box-blue {
    @include box_size(200px, 100px, 20px, blue);
  }
  .box-red {
    @include box_size(200px, 50px, 20px, red);
  }

 

매개변수의 값을 사용하기 위해서는 #{$매개변수 명} 을 사용하면 값을 매개변수 명을 가져올 수 있다

위의 예제에서 width를 300px로 변경해서 같아서 이걸 예시로 값을 변경 해보았다

 

@mixin box_size($W, $H, $P, $size) {
  #{$W}: 300px;
  height: $H;
  padding: $P;
  background-color: $size;
}

  .box-green {
    @include box_size(width, 200px, 20px, green);
  }
  .box-blue {
    @include box_size(width, 100px, 20px, blue);
  }
  .box-red {
    @include box_size(width, 50px, 20px, red);
  }

 

결과는 width:300px; 값으로 나오는 것을 볼수 있다