[Sass 특징] @mixin, content block (@content)

2020.03.27 - [Frontend/Sass (SCSS)] - [Sass 특징] @mixin 과 @include

 

예전에 포스팅한 @mixin과 @include에 대한 기본적인 내용과 더불어

@mixin과 @include 문법을 작성할 때,

빼놓을 수 없는 문법이 콘텐츠 블록(content block),

즉 @content 문법이다.

 

* @content 사용

@mixin을 통해 반복되는 css 내용들을 미리 등록해놓고 필요할때마다 사용할 때,

변동되는 값 들은 파라미터로 적용해서 필요에 따라 다른 값을 줄 수 있다.

/* SCSS */
@mixin common-box ($wsize:10px, $hsize:10px){
  &:after{
    display: block;
    content: '';
    border: 1px solid #333;
    width: $wsize;
    height: $hsize;
  }
}



.box1{
  @include common-box;
}

.box2{
  @include common-box($wsize:20px, $hsize:20px);
}


/* css로 컴파일 */
.box1:after {
  display:block; 
  content:''; 
  border:1px solid #333;
  width:10px; 
  height:10px;
}

.box2:after {
  display:block; 
  content:''; 
  border:1px solid #333; 
  width:20px; 
  height:20px;
}

위의 예시처럼 $wsize, $hsize의 파라미터 값으로 

.box1, .box2의 :after에 서로 다른 width, height 값을 적용한다.

 

 

하지만 위와 같이 단순 border, width, height 값 뿐만 아니라

.box2:after에만 background 값을 넣고 싶다면..?

/* SCSS */
@mixin common-box ($wsize:10px, $hsize:10px){
  &:after{
    display: block;
    content: '';
    border: 1px solid #333;
    width: $wsize;
    height: $hsize;
  }
}


.box2{
  @include common-box($wsize:20px, $hsize:20px);  // after에 대한 @include
  &:after{
    background: #f0f0f0;  // after에 대한 css 추가
  }
}


/* css로 컴파일 */
.box2:after {
  display:block; 
  content:''; 
  border:1px solid #333; 
  width:20px; 
  height:20px; 
  background:#f0f0f0;
}

위와 같이 .box2:after에 background 값을 따로 입력하는 방법이 있을 수 있겠지만

그렇게 되면 .box2에 @include한 값이 :after 속성인데

또 한번 &:after를 사용하여 css를 추가하게 되어

나중에 소스가 많아졌을 경우 문법을 한눈에 알아보는데 어려움이 있을 수 있다.

 

이럴 때 편하게 특정 요소에만 원하는 css를 추가할 수 있는 방법이

@content 이다.

/* SCSS */
@mixin common-box ($wsize:10px, $hsize:10px){
  display: block;
  content: '';
  border: 1px solid #333;
  width: $wsize;
  height: $hsize;
  
  @content;
}


.box2{
  @include common-box($wsize:20px, $hsize:20px){
    background:#f0f0f0;
  };
}


/* css로 컴파일 */
.box2:after {
  display:block; 
  content:''; 
  border:1px solid #333; 
  width:20px; 
  height:20px; 
  background:#f0f0f0;
}

위와 같이 @mixin 안에 @content; 라는 문법을 작성해놓으면

@include 믹스인명(...){
  *추가할 css 내용 작성
}

위 예시처럼 @include할 때 필요한 css를 바로바로 적용해 넣을 수 있다.