SCSS

SCSS (Sassy CSS)

Sass(Syntactically Awesome Stylesheets)의 한 문법으로, CSS의 기능을 확장하여 더 효율적이고 유지보수 가능한 스타일을 작성할 수 있게 한다.

 

# 주요 기능

1. 중첩(Nesting): CSS 규칙을 중첩하여 구조화된 스타일을 작성할 수 있다
2. 변수(Variables): 색상, 폰트 크기 등 자주 사용하는 값을 변수로 선언하고 재사용할 수 있다
3. 믹스인(Mixins): 반복적인 스타일을 재사용할 수 있는 기능.
4. 상속(Inheritance): 스타일을 상속하여 중복 코드를 줄일 수 있다
5. 연산(Operations): 숫자나 색상 등의 연산이 가능하다

// 변수(Variables)
$primary-color: #3498db;
$font-size: 16px;

// 믹스인(Mixins)
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 중첩(Nesting)
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
 
  .primary-button {
    @extend .button;  // 스타일 상속
    font-weight: bold;
  }
  
  .header {
    color: white;
    @include flex-center; // 믹스인 호출

    h1 {
      font-size: $font-size * 1.5; // 연산
      margin: 0;
    }
  }
}