Sass, SCSS에 대한 이해

👉 Sass(Syntactically Awesome Style Sheets)란?

• CSS를 보다 효율적으로, 편리하게 작성하기 위해 만들어진 프리프로세서(preprocessor) 언어/스크립팅 언어
• CSS의 한계를 극복하기 위해 개발되었으며, 변수, 중첩 규칙, 믹스인(mixins), 상속 등과 같은 기능을 제공
• 기본적으로 CSS의 기능을 확장함
• 코드의 재사용성을 높이고 유지보수를 용이하게 만들어 줌
  
  
  
  

👉 Sass의 특징

• 변수를 사용할 수 있음
  • 색상, 글꼴 크기 등 자주 사용되는 스타일 값을 변수로 저장해 재사용할 수 있음
  • 예 : 주요 색상을 한 곳에 정의하고 사이트 전체에서 이 변수를 사용하여 일관된 테마를 유지할 수 있음
• 중첩해서 사용할 수 있음(중첩 규칙)
  • CSS 선택자를 중첩해서 사용할 수 있어, HTML 구조를 코드 상에서 명확하게 반영할 수 있음
  • 코드의 가독성을 높임
• 믹스인(Mixins)
  • 스타일 블록을 정의하여 여러 곳에서 재사용할 수 있음
  • 예 : 버튼에 공통적으로 적용되는 여러 스타일 속성을 믹스인으로 만들어 필요한 곳에서 호출만으로 쉽게 적용할 수 있음
• 상속
  • 한 선택자의 스타일을 다른 선택자에서 그대로 가져와 사용할 수 있어, 코드 중복을 줄일 수 있음
    
    
    
    

👉 Sass의 예시

// 변수 정의
$primary-color: #333;
$font-large: 16px;

// 믹스인 정의
@mixin button-style($color) {
  padding: 10px 15px;
  background-color: $color;
  border: none;
  border-radius: 5px;
  color: white;
  text-align: center;
  display: inline-block;
  cursor: pointer;

  &:hover {
    background-color: darken($color, 10%);
  }
}

// 기본 컨테이너 스타일
.container {
  font-family: Arial, sans-serif;

  .content {
    padding: 20px;
    background-color: $primary-color;
    color: white;
    font-size: $font-large;

    // 믹스인 사용 예
    .button {
      @include button-style(blue);
    }
  }
}

// 에러 메시지 스타일
.error-message {
  @extend .content; // 상속 사용
  background-color: red;
  font-size: 14px;
}

👉 SCSS(Sassy CSS)란?

• Sass의 모든 기능을 지원하면서도 CSS와 거의 같은 문법을 사용하는 문법적인 스타일
• Sass의 구문과 기능을 CSS와 호환되도록 설계된 문법으로 확장한 것을 의미
• SCSS는 기존 CSS 코드와 완벽하게 호환되기 때문에, 기존의 CSS 파일을 .scss 확장자로 변경만 해도 Sass의 기능을 바로 사용할 수 있음
  
  
  
  

👉 SCSS의 예시

• CSS에서 작성하는 방법

  .button {
    color: blue;
    background-color: white;
    border: 1px solid black;
  }
  
  .button:hover {
    background-color: blue;
    color: white;
  }

• SCSS에서 작성하는 방법(중첩 규칙 사용)

  .button {
    color: blue;
    background-color: white;
    border: 1px solid black;
  
    &:hover {
      background-color: blue;
      color: white;
    }
  }

  • & 기호는 부모 선택자를 참조하며, .button 클래스가 hover 상태일 때의 스타일을 설정