[Scss] @mixin, @include, @content

1. @mixin, @include

자주 사용하는 패턴이나 재사용을 위한 구문을 @mixin으로 작성하고 @include로 호출하며, @mixin안에 @include사용하는 것도 가능하다

@mixin ellipsis-text { 
  overflow : hidden;
  text-overflow : ellipsis;
  width : 100%; 
  white-space : nowrap;
}
  
.text { 
  @include ellipsis-text;
  color : #f00;
}

// result
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  color: #f00;
}

@mixin은 함수처럼 인자를 전달해서 사용하는 것도 가능하고, 인자를 복수형태로도 받을 수 있다

@mixin border($color, $width){
  border-color: $color;
  border-width: $width;
}

@mixin margin($var...) { 
  margin : $var;
}
  
p {
  @include border(blue, 30px);
}
  
p { 
  @include margin(5px)
}
p { 
  @include margin(5px 5px)
}
p { 
  @include margin(5px 5px 5px)
}
p { 
  @include margin(5px 5px 5px 5px)
}

또한 @include를 사용할 때 키워드 인수로 설정할 수 있다

@mixin setColor($font: #222222, $background: transparent) {
  color: $font;
  background-color: $background;
}

html,
body {
  @include setColor($background: color.$BLUE1);
}

.name {
  @include setColor(color.$WHITE);
}

.age {
  @include setColor(color.$WHITE, color.$BLUE1);
}

2. @content

@mixin에 인자를 넘기는 것이 아니라 내용 자체를 넘기고 싶은 경우에 사용한다

@mixin mq { 
  @media screen and  (max-width : 768px) { 
    @content;
  }
}
  
p {
  width : 300px;
  @include mq { 
    color : blue; // 전달할 블럭
  }
}

// Result  
p { 
  width : 300px;
}

@media screen and (max-width : 768px){
  p { 
    color : blue;
  }
}