[scss] mixin

 

mixin : 재활용, 스타일 시트 전체에서 재사용할 css 선언 그룹을 정의하는 기능이다.

 

- @mixin은 재사용할 내용을 선언하는 부분이다.

- @include는 @mixin에서 정의된 내용을 삽입, 적용되는 부분이다.

- @content는 해당 부분에 원하는 스타일 블록을 전달할 수 있다. 즉, mixin이 가지고 있는 기능에 선택자나 속성을 추가할 수 있다. 

 

 

@mixin 문법

// SCSS문법
@mixin 믹스인이름 {
  스타일;
}

 

변수 사용도 가능하다. 

@mixin size($w, $h){
    width: $w;
    height: $h;
}
@mixin size($w:100px, $h: 100px) { //디폴트값을 설정하여 값이 없는경우 적용된다.
    width: $w;
    height: $h;
}

 

@include 문법

// SCSS문법
@include 믹스인이름;

 

@content 문법

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}