4. CSS의 기반 SASS 기본 정의 (Mixin)

Mixin 정의하기

Mixin은 다음과 같은 형식으로 정의합니다.

@mixin mixin-name {
  // code
}

인자를 포함하여 다음과 같이 정의할 수도 있습니다.

@mixin mixin-name( $arg1, $arg2, ... ) {
  // code
}

Mixin 사용하기

Mixin을 사용할 때는 다음과 같이 합니다.

@include mixin-name;

인자가 있는 mixin이라면 다음과 같이 합니다.

@include mixin-name( value1, value2, ... );

===================================

가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다.

SASS

@mixin jb {
  p {
    color: red;
  }
}
@include jb;

CSS

p {
  color: red; }

예제 2

@include는 선택자 안에서 사용할 수도 있습니다.

SASS

@mixin jb {
  color: red;
} // 먼저 선언해주기
p {
  @include jb;
} // 불러오기

CSS

p {
  color: red; }

예제 3

인자를 사용한 간단한 예제입니다.

SASS

@mixin jb( $margin, $color ) {
  margin: $margin;
  color: $color;
}
p {
  @include jb( 20px 0px, red );
}

CSS

p {
  margin: 20px 0px;
  color: red; }

예제 4

인자를 사용하고, 특정 인자에는 기본값을 설정한 예제입니다. 

인자에 대한 값을 정해주지 않으면 기본값을 사용합니다.

SASS

@mixin jb( $margin, $color: blue ) {
  margin: $margin;
  color: $color;
}
p {
  @include jb( 20px 0px );
}

CSS

p {
  margin: 20px 0px;
  color: blue; }