[SCSS] SCSS(사스) 소개와 기본 문법

SCSS(Scalable and Modular Stylesheets)는 CSS를 확장한 스타일 시트 언어로, 더욱 간결하고 모듈화된 스타일 코드를 작성할 수 있도록 도와줍니다. SCSS는 CSS의 모든 기능을 포함하며, 변수, 중첩(Nesting), 믹스인(Mixin), 상속(Extend) 등의 추가 기능을 제공합니다. 이 글에서는 SCSS의 소개와 기본 문법에 대해 알아보겠습니다.

---

1. SCSS 소개

SCSS는 CSS의 한계를 극복하고 유지보수가 용이한 스타일 코드를 작성하기 위해 개발된 스타일 시트 언어입니다. SCSS는 Sass(Syntactically Awesome Style Sheets)의 한 종류로, CSS와 거의 동일한 문법을 가지고 있습니다. 따라서 CSS 기반의 프로젝트에서 쉽게 도입할 수 있습니다.

---

2. 기본 문법

2.1. 변수

변수를 사용하여 스타일 속성의 값을 저장하고 재사용할 수 있습니다.

      

      

      

    
    

      <css />
    
$primary-color: #007bff;
$font-size: 16px;

.header {
  background-color: $primary-color;
  font-size: $font-size;
}

 

2.2. 중첩(Nesting)

중첩을 이용하여 부모 선택자 안에 자식 선택자를 작성할 수 있습니다.

      

      

      

    
    

      <css />
    
.navbar {
  background-color: #f1f1f1;

  li {
    display: inline-block;
    margin: 0 10px;

    a {
      color: #333;
      text-decoration: none;
    }
  }
}

2.3. 믹스인(Mixin)

재사용 가능한 스타일 블록을 믹스인으로 정의하여 여러 곳에서 활용할 수 있습니다.

      

      

      

    
    

      <css />
    
@mixin rounded-corners($radius) {
  border-radius: $radius;
}

.button {
  @include rounded-corners(5px);
  background-color: #007bff;
  color: #fff;
  padding: 10px;
}

 

2.4. 상속(Extend)

특정 스타일을 다른 선택자에서 상속하여 코드를 간결하게 만들 수 있습니다.

      

      

      

    
    

      <css />
    
.error {
  border: 1px solid #ff0000;
  color: #ff0000;
}

.error-message {
  @extend .error;
  font-size: 14px;
}

 

2.5. 연산자

CSS 속성 값을 계산하는 데 사용되는 연산자를 사용할 수 있습니다.

      

      

      

    
    

      <css />
    
.container {
  width: 100% - 20px;
  height: 200px * 2;
}

SCSS의 소개와 기본 문법에 대해 간략하게 알아보았습니다. SCSS의 강력한 기능을 활용하여 CSS 코드를 더욱 효율적으로 작성할 수 있습니다. 다음 글에서는 SCSS의 더 다양한 기능에 대해 자세히 알아보겠습니다.