[Sass/SCSS] mixin 사용하기

#1-1. argument 사용하지 않음

1. mixin을 사용하고자하는 scss 파일에서 mixin 작성

@mixin mixin-name() {
  // 추가하고싶은 css 코드를 넣는다.
  color: red;

  .ic-cloe {
    width: 40px;
  }
}

2. mixin을 사용하고자하는 scss 파일에서 mixin 사용

p {
  @include mixin-name();
}

3. 연결된 css에서는 다음과 같이 랜더링된다.

 

 

 

 

1-2. argument 사용

1. mixin을 사용하고자하는 scss 파일에서 mixin 작성

@mixin mixin-name($color) {
  // css 코드
  color: $color;

  .ic-cloe {
    width: 40px;
  }
}

// 다음과 같은 방식으로 argument에 기본값을 할당할 수도 있다. 
@mixin mixin-name($color: red) {
  // css 코드
}

2. mixin을 사용하고자하는 scss 파일에서 mixin 사용

p {
  @include mixin-name(blue);
}

3. 연결된 css에서는 다음과 같이 랜더링된다.