app.scss 사용하는 이유

app.scss를 사용하는 이유는 여러 가지가 있지만, 말씀하신 @mixin과 코드 가독성 외에도 많은 장점이 있습니다. 아래에서 좀 더 자세히 설명드릴게요.

 

1. @mixin 사용

• **@mixin**은 재사용 가능한 CSS 블록을 정의할 수 있게 해줍니다.
  • 예: 반응형 레이아웃에서 미디어 쿼리를 반복적으로 쓰거나, 특정 스타일을 여러 곳에서 재사용하고 싶을 때 유용합니다.
  • 코드의 중복을 줄이고 유지보수가 쉬워집니다.
   

scss

@mixin flex-center { display: flex; justify-content: center; align-items: center; }
.header { @include flex-center; }
.footer { @include flex-center; }

---

2. 코드 가독성

• SCSS는 **중첩(Nesting)**을 지원하므로, CSS보다 훨씬 가독성이 좋습니다.
  • 요소의 계층 구조를 직관적으로 표현할 수 있습니다.
  • 긴 클래스 이름이나 셀렉터를 반복하지 않아도 됩니다.

  scss

  .navbar {
    background: #333;
    color: white;
  
    .menu {
      list-style: none;
      padding: 0;
  
      li {
        display: inline-block;
  
        a {
          color: white;
          text-decoration: none;
  
          &:hover {
            color: #f90;
          }
        }
      }
    }
  }

  .
  • SCSS에서는 코드가 계층 구조로 표현되지만, 컴파일된 CSS는 이렇게 됩니다:

    css

     

    .navbar {
      background: #333;
      color: white;
    }
    
    .navbar .menu {
      list-style: none;
      padding: 0;
    }
    
    .navbar .menu li {
      display: inline-block;
    }
    
    .navbar .menu li a {
      color: white;
      text-decoration: none;
    }
    
    .navbar .menu li a:hover {
      color: #f90;
    }

---

3. 변수 사용

• **$변수**로 색상, 크기, 폰트 크기 등 반복되는 값을 쉽게 관리할 수 있습니다.

  scss

   

  $primary-color: #3498db;
  $secondary-color: #2ecc71;
  
  body {
    background-color: $primary-color;
    color: $secondary-color;
  }

• 변수 값을 수정하면, 관련된 모든 스타일이 자동으로 업데이트되므로 테마 변경이나 유지보수가 간편합니다.

---

4. 파일 분리 및 관리

• @import 또는 **@use**를 통해 스타일 파일을 분리해서 관리할 수 있습니다.
  • header.scss, footer.scss, variables.scss처럼 파일을 나눠 관리하면 가독성이 크게 향상됩니다.
  • 최종적으로 하나의 CSS 파일로 컴파일됩니다.

---

5. 계산 기능

• SCSS는 CSS보다 강력한 수학 연산을 지원합니다.
  • 예: 가로와 세로 길이를 계산하거나 색상을 조정하는 경우.

  scss

  $base-spacing: 16px;
  
  .container {
    padding: $base-spacing * 2;
    margin: $base-spacing / 2;
  }

---

6. 조건문과 반복문

• @if, @for, @each, @while 같은 프로그래밍 문법으로 반복 작업을 쉽게 처리할 수 있습니다.
  
   

scss

@for $i from 1 through 4 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

 

컴파일 후:

 

css

 

.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.3333%;
}
.col-4 {
  width: 25%;
}

---

결론: SCSS(app.scss)를 사용하는 주요 이유

1. @mixin: 재사용 가능한 코드로 중복 제거.
2. 가독성: 중첩 구조로 코드가 더 직관적.
3. 변수 관리: 값 수정이 간편.
4. 파일 분리: 스타일을 모듈화해서 관리.
5. 수학 연산: CSS보다 더 강력한 계산 기능.
6. 조건문과 반복문: 효율적인 스타일링 작업 가능.

SCSS는 단순히 가독성과 재사용성뿐만 아니라, 코드의 유지보수성과 확장성을 높이는 데 큰 도움을 줍니다! 😊