[SCSS] Mixins

 

 

Mixin

Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다.

 

@mixin을 이용해 재사용하고 싶은 스타일을 선언한 후, @include를 통해 사용한다.

 

 mixin 역시 변수 선언 파일을 생성한 것처럼, 따로 파일을 생성하여 선언 후 여러 파일에서 사용 가능하다.

이때 파일 이름은 앞에 밑줄(_)을 넣어주어 CSS로 변환되지 않게 해주어야 한다.

 

@mixin strongTitle{
  color: blue;
  font-size: 32px;
  font-weight: 900;
}

 

@import "_mixins";

h1{
  @include strongTitle;
}

 

 

mixin에 변수를 허용하게 해주어 더 다양하게 스타일 지정이 가능하다.

@mixin link($color){
  text-decoration: none;
  display: block;
  color: $color;
}

$color라는 변수를 가지는 mixin이 있다.

 

@import "_mixin파일이름";

a{
 margin-top: 10px;
  &:nth-child(odd){
    @include link(blue);
  }
  &:nth-child(even){
    @include link(red);
  }
}