그룹 재사용 선언 @mixin

• mixin(믹스인)은 함수와 비슷한 동작을 하는 문법으로 CSS 스타일 시트에서 반복적으로 재사용할 CSS 스타일 그룹 선언을 정의하는 기능
• 단순하게 CSS 그룹으로 정의하여 적용할 수 있지만 인수를 활용하게 되면,
  반복되는 CSS 속성을 한 개의 mixin(믹스인) 정의를 가지고 다양한 CSS 스타일을 만들어 낼 수 있다.

@mixin 기본 문법

@mixin 선언하기

@mixin 믹스인 이름 {
	재사용 스타일 속성
}

index.html

<h1 class="heading">
    Welcome <span>Jieun</span> Blog
</h1>

style.scss

@mixin heading {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  span {
    color: royalblue;
  }
  &::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    background-color: chocolate;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@mixin으로 선언한 스타일은 @include로 사용하기 전까지 컴파일 되지 않는다.

선언된 @mixin 사용하기

@mixin으로 정의해 만든 CSS 스타일을 @include을 이용하여 참조해서 재사용할 수 있다.

선택자 {
	@include 믹스인 이름
}

style.scss

@mixin heading {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  span {
    color: royalblue;
  }
  &::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    background-color: chocolate;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.heading {
  @include heading;
}

style.css

.heading {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.heading span {
  color: royalblue;
}
.heading::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 4px;
  background-color: chocolate;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.SCSS 에서 @mixin으로 선언된 CSS는 어떠한 선택자에도 @include를 통해 재사용할 수 있다.

style.scss

@mixin heading {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  span {
    color: royalblue;
  }
  &::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    background-color: chocolate;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.frame {
  @include heading;
}

style.css

.frame {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.frame span {
  color: royalblue;
}
.frame::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 4px;
  background-color: chocolate;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

독립 파일 만들기

@mixin을 매번 만드는 것 보다는 파일을 따로 만들어 자주 사용하는 그룹을 @mixin으로 여러 개 만들어 놓고 .SCSS에서 @import 로 불러오면 mixin.scss 파일 안에 미리 세팅된 믹스인들을 활용할 수 있다.

mixin.scss

@mixin default {
    font-size: 15px;
    margin: 0;
    color: #333;
    background-color: #fff;
    list-style: 1.6em;
}

style.scss

@import './mixin.scss';

body {
  @include default;
}

style.css

body {
  font-size: 15px;
  margin: 0;
  color: #333;
  background-color: #fff;
  list-style: 1.6em;
}

@mixin + @include

• @include 로 @mixin을 사용하면서 추가적인 CSS를 사용할 수 있다.
• 하나의 선택자에 여러 개의 @mixin을 사용할 수 있다.

예제

@mixin과 @include를 활용하여 의미에 따른 여러가지 버튼 디자인을 만들어보자.

• 기본 버튼 디자인을 notice-button 믹스인을 만들고 여러 가지 버튼에 기본적으로 적용한다.
• 그리고 개별적인 디자인을 추가해서 다양한 버튼 디자인을 만든다.

index.html

<div class="frame">
  <button class="complete">완료</button>
  <button class="loading">전송중</button>
  <button class="error">오류</button>
</div>

style.scss

@mixin notice-button {
  font-size: 15px;
  width: 120px;
  padding: 7px;
  background-color: #fff;
  cursor: pointer;
}

.complete {
  @include notice-button;
  border: 1px solid royalblue;
  color: royalblue;
}
.loading{
  @include notice-button;
  border: 1px solid green;
  color: green;
}
.error {
  @include notice-button;
  border: 1px solid red;
  color: red;
}

style.css

.complete {
  font-size: 15px;
  width: 120px;
  padding: 7px;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid royalblue;
  color: royalblue;
}

.loading {
  font-size: 15px;
  width: 120px;
  padding: 7px;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid green;
  color: green;
}

.error {
  font-size: 15px;
  width: 120px;
  padding: 7px;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid red;
  color: red;
}

매개변수, 인수 사용하기

• SCSS에 선언된 @mixin에 매개변수, 인수를 사용할 수 있다.
• $매개변수 개수, 인수 개수, 값 개수와 순서를 반드시 맞춰야 한다.

@mixin 믹스인 이름($매개변수, $매개변수, $매개변수) {
  CSS 속성 : 인수1 인수2 인수3
}

@include 믹스인 이름(값1, 값2, 값3)

예제

index.html

<div class="buttons">
  <button class="approval">승인</button>
  <button class="refuse">거절</button>
</div>

style.scss

@mixin border-style($width, $style, $color){
  border: $width $style $color;
}

.buttons {
  button {
    width: 200px;
    padding: 7px;
    background-color: #fff;
    font-size: 18px;
    &.approval {
      @include border-style(1px, solid , crimson)
    }
    &.refuse {
      @include border-style(1px, dashed , royalblue)
    }
  }
}

style.css

.buttons button {
  width: 200px;
  padding: 7px;
  background-color: #fff;
  font-size: 18px;
}
.buttons button.approval {
  border: 1px solid crimson;
}
.buttons button.refuse {
  border: 1px dashed royalblue;
}