SCSS 초보자를 위한 실전 예제: Mixin, Include, For문 활용하기

SCSS에서 mixin, include, 그리고 for문은 코드 재사용성과 유지 보수를 높이는 데 유용합니다.

 

⭐️ @mixin은 반복적으로 사용할 CSS 코드를 정의하는 데 사용됩니다.

//구문
@mixin 이름(매개변수들) {
  스타일들;
}

//예시
@mixin button-style($color, $size) {
  background-color: $color;
  font-size: $size;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
}

 

⭐️ @include는 정의된 mixin을 실제로 적용할 때 사용합니다.

//구문
@include 이름(인수들);

//예시
.my-button {
  @include button-style(#3498db, 16px);
}

.secondary-button {
  @include button-style(#2ecc71, 14px);
}

 

⭐️ @for문은 반복적으로 스타일을 생성하는 데 사용됩니다.

//구문
@for $변수 from 시작 through 끝 {
  스타일들;
}

//예시
@for $i from 1 through 5 {
  .box-#{$i} {
    width: 100px * $i;
    height: 50px * $i;
    background-color: lighten(#3498db, $i * 5%);
  }
}

//생성되는 css
.box-1 {
  width: 100px;
  height: 50px;
  background-color: #5dade2;
}
.box-2 {
  width: 200px;
  height: 100px;
  background-color: #85c1e9;
}
/* ... */

 

⭐️ 응용예제

@mixin responsive-btn($color, $hover-color) {
  background-color: $color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: 0.3s;

  &:hover {
    background-color: $hover-color;
  }

  @media (max-width: 768px) {
    padding: 8px 16px;
  }
}

@for $i from 1 through 3 {
  .btn-#{$i} {
    @include responsive-btn(lighten(#3498db, $i * 5%), darken(#3498db, $i * 5%));
  }
}

 

⭐️ 생성된 css

.btn-1 {
  background-color: #5dade2;
  /* ... */
}
.btn-2 {
  background-color: #85c1e9;
  /* ... */
}
/* ... */