@mixin

• 자주 사용하는 css 들을 @mixin으로 뽑아서 사용

사용법

@mixin foo() {
   ...css 영역
}

// 반드시 앞에 '@include' 를 적어주어야 한다!
p {
  @include foo():
}

argument

생긴것과 같이 함수처럼 argument를 전달하여 확장성을 높일수 있다.

@mixin foo($color) {
  color: $color;
}

p {
  @include foo(blue);
}

default값 지정

@mixin foo($color: false) {
  // validation check
  // arg가 color 속성인 경우에만 컬러 속성 지정
  @if (type-of($color) == color) {
    color: $color;
  }
}

@content

• @mixin을 사용하는 곳에서 추가적으로 확장이 가능하다.

@mixin bar() {
  @content;
}

@include bar() {
  ...css // @content로 지정한곳에 들어간다.
}

@mixin과 비슷한 기능

@function

• @mixin은 @include를 사용해야 했지만 @function은 바로 사용 가능
• 어떤 특정값만 반환함

선언시 접두어	사용시 접두어	반환값
@mixin	@include	css 코드
@function	없음	특정한 값

@function _get-flex-value($key) {
// 특정한 값을 반환 한다.
  @return map-get($flex-map, $key);
}

'%' placeholder

• @mixin과 하는 일은 비슷하다.
• 인자를 사용할 수 없다.
• 공통스타일을 상속받는식으로 사용

선언시 접두어	사용시 접두어	용도	차이점
@mixin	@include	자주사용하는 코드 재사용	arg ✔
%	@extend	공통 스타일 상속	arg ❌, 컴파일 후 연관있는 것들을 그룹화

%star-rating-base {
  @include flexbox(start);

  .ic-star {
    color: $border;

    &.is-active {
      color: $blue;
    }
  }
}

.star-rating-13 {
  @extend %star-rating-base;
  font-size: 13px;
}