SASS 믹스인 내 콘텐츠 블록

믹스인 내부에 스타일 블록을 전달하기 위해 지시어 @content를 사용하며, 이 위치에 필요한 스타일이 삽입됩니다.

예를 살펴보겠습니다:

styles.scss@mixin active {
  * div {
    @content;
  }
}

@include active {
  #block {
    color: red;
  }
}

컴파일 결과:

styles.css* div #block {
  color: red; 
}

지시어 @content를 한 번 이상 또는 루프 내에서 지정하면 스타일 블록도 그만큼 여러 번 호출된다는 점을 알아야 합니다.

styles.scss@mixin active {
  div {
    @content;
  }
navbar {
    @content;
  }
}
@include active {
  #block {
    color: red;
  }
  button {
    color:green;
  }
}

컴파일 후 다음과 같이 표시됩니다:

styles.cssdiv #block {
  color: red; 
}
div button {
  color: green; 
}

navbar #block {
  color: red; 
}
navbar button {
  color: green; 
}

styles.scss@mixin super-link {
  a {
    @content;
  }
}
@include super-link {
  color: blue;
  text-decoration: underline;
}

styles.scss@mixin super-link {
  a {
    @content;
  }
  a .primary-link{
    @content;
    font-weight: bold;
  }
}
@include super-link {
  color: blue;
  text-decoration: underline;
}

styles.scss@mixin colors {
  ...
}