Mixin, Include 2

이전 내용에서처럼 외부에서 값을 받아오는 일이 없으면 굳이 매개변수를 사용하지 않아도 된다.

또한 굳이 @mixin을 쓰지않아도 사용이 가능하다.

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

// Sass
=믹스인이름
  스타일

 

// SCSS
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// Sass
=large-text
  font-size: 22px
  font-weight: bold
  font-family: sans-serif
  color: orange

소스코드에서 볼 수 있듯이, SCSS는 중괄호로 범위를 지정하고 Sass는 들여쓰기를 잘 해야한다.

 

 

예시)

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

&는 어디에 참조하는지 mixin에서 선언한 곳에서는 알 수 없다. 왜냐하면 @mixin이 어디에 사용 되는지 알 수 없기 때문이다.

 

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

.box1{
    @include large-text;
}

.box2{
    @include large-text;
}

다음과 같이 @include를 이용해서 참조시키면

.box1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

.box1::after {
  content: "!!";
}

.box1 span.icon {
  background: url("/images/icon.png");
}

.box2 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

.box2::after {
  content: "!!";
}

.box2 span.icon {
  background: url("/images/icon.png");
}

잘 출력되는것을 볼 수 있다.

 

 

@include

선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요하다.
위에서 선언한 Mixin을 사용해 보겠다.

// SCSS
@include 믹스인이름;

// Sass
+믹스인이름

@include를 사용할때 Sass는 "+" 사용하는걸로 알 수 있다.

 

// SCSS
h1 {
  @include large-text;
}
div {
  @include large-text;
}

// Sass
h1
  +large-text
div
  +large-text