SCSS: SCSS Ep.4

재활용(Mixins)

<div class="container">
	<div class="item">
		Mixin
	</div>
</div>

.container {
  background-color: orange;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .item {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

가운데 정렬하는 부분이 반복적으로 사용되고 있다. (각 클래스 하단 3개의 코드줄)
이렇게 반복되는 코드 작성을 ‘mixin’을 통해 줄여준다.

• mixin 사용하기

  @mixin center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
    
  .container {
    @include center;
      .item {
        @include center;
      }
  }
    
  .box {
    @include center;
  }
  

  • ‘@mixin’에 재활용할 코드를 넣어준다. mixin 키워드 뒤에 설정할 이름또한 정해준다.
  • ‘@include’를 통해서 재활용한 코드를 사용한다.
  • 재활용이 가능하기 때문에 새로운 클래스인 box에도 사용이 가능하다.

• 세부 값 변경해서 사용하기

  container 클래스의 width 값을 변경하고 싶을때, mixin 사용을 버리고 따로 작성해야 할까? No!

  @mixin box {
    width: 100px;
    height: 100px;
    background-color: tomato;
  }
    
  .container {
    @include box;
    .item {
      @include box;
    }
  }
    
  .box {
    @include box;
  }
  

  .container {
    width: 100px;
    height: 100px;
    background-color: tomato;
  }
  .container .item {
    width: 100px;
    height: 100px;
    background-color: tomato;
  }
    
  .box {
    width: 100px;
    height: 100px;
    background-color: tomato;
  }
  

  mixin에서 제공하는 인수를 통해 원하는 세부 값을 변경해서 사용할 수 있다.

  • mixin에서 인수 사용하기

    @mixin box($size) {
      width: $size;
      height: $size;
      background-color: tomato;
    }
        
    .container {
      @include box(200px);
      .item {
        @include box(100px);
      }
    }
        
    .box {
      @include box(100px);
    }
    

    .container {
      width: 200px;
      height: 200px;
      background-color: tomato;
    }
    .container .item {
      width: 100px;
      height: 100px;
      background-color: tomato;
    }
        
    .box {
      width: 100px;
      height: 100px;
      background-color: tomato;
    }
    

    • mixin 으로 설정한 이름 옆에 소괄호를 만들어 해당 괄호 안에 변수를 넣어준다.
    • mixin 안에 변수로 사용할 부분에 해당 변수명을 넣어준다.
    • include로 호출할때 각 mixin 소괄호 안에 인수 값을 지정해서 넣어준다. (꼭 넣어줘야지만 error 없이 작동한다.)
  • 인수 default값 지정하기

    @mixin box($size: 100px) {
      width: $size;
      height: $size;
      background-color: tomato;
    }
        
    .container {
      @include box(200px);
      .item {
        @include box;
      }
    }
        
    .box {
      @include box;
    }
    

    • 매개변수 부분에 변수뒤에 기본값으로 지정하고 싶은 값을 넣어준다.
    • 기본값과 다르게 하고 싶은 부분에만 소괄호를 사용하여 해당 괄호 안에 원하는 값을 넣어준다.
    • 변경을 원하지 않는 부분에는 mixin의 이름만 작성한다. (소괄호, 인수를 넣지 않아도 error가 발생하지 않는다.)
  • 매개변수 여러개 만들기

    @mixin box($size: 100px, $color: tomato;) {
      width: $size;
      height: $size;
      background-color: $color:;
    }
        
    .container {
      @include box(200px, red);
      .item {
        @include box(100px,green);
      }
    }
        
    .box {
      @include box;
    }
    

    .container {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .container .item {
      width: 100px;
      height: 100px;
      background-color: green;
    }
        
    .box {
      width: 100px;
      height: 100px;
      background-color: tomato;
    }
    

    매개변수 입력하는 소괄호 안에 원하는 변수를 만들면 된다.
    사용할 때에는 include 소괄호 안에 해당하는 값을 넣어주면 된다.

    • 매개변수 두개 중에 변경을 원하는 값이 하나라면?
      • 변경을 원하지 않는 부분에는 기본 값 넣어서 사용하기

        @mixin box($size: 100px, $color: tomato;) {
          width: $size;
          height: $size;
          background-color: $color:;
        }
                
        .container {
          @include box(200px, red);
          .item {
            @include box(100px,green);
          }
        }
        

        100px 없이 green만 작성했을 경우에, green값이 width와 height로 들어간다. 그렇기에 꼭, 인수 순서를 지켜서 값을 작성해야 올바르게 값이 들어갈 수 있다.

      • 인수부분에 변경을 원하는 변수의 값을 명시해서 변경하기

        @mixin box($size: 100px, $color: tomato;) {
          width: $size;
          height: $size;
          background-color: $color:;
        }
                
        .container {
          @include box(200px, red);
          .item {
            @include box($color: green);
          }
        }
        

        해당 방법을 키워드 인수라고 부른다.
        인수를 사용하는데, 인수 앞에 매개변수의 이름을 지정하는데 이때, 이 매개변수를 키워드라고 부른다. 키워드의 인수를 넣어주었기 때문에 키워드 인수이다.

        해당 방법은 인수의 순서와 상관없이 해당하는 변수에 값이 들어간다.