SCSS: SCSS Ep.4

20 Dec 2022 • TIL

재활용(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);
  }
}

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

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

 TIL  SCSS

Comments

Related Posts