Scss #6_2. mixin & include

mixin의 경우 여러가지 변수를 인자값으로 넣어두고 쓸수있다. 해당 내용도 여러가지로 활용되면

 

편하게 사용할수있을거같다. 웹사이트내에 공통적으로 사용되는 박스나 버튼등에 사용되면 좋을거같다.

 

 // scss file
 
@mixin box($w, $h, $borderpx, $border) {
  width: $w;
  height: $h;
  border: $borderpx solid $border;
}
 
div {
  @include box(300px, 500px, 3px, yellow);
}

 // css file
 
div {
  width: 300px;
  height: 500px;
  border: 3px solid yellow;
}