SASS

SASS 설치 명령어

• npm 명령어

npm install sass

• 만약 전역으로 설치하고 싶다면

npm install -g sass

• App.js에 style.scss import해주기

---

sass 와 css 비교

1. 기본 개념

CSS (Cascadig Style Sheets)

• 웹 페이지의 스타일링을 정의하는 기본 스타일시트 언어
• 브라우저가 직접 해석하고 실행

SASS (Syntactically Awesome Style Sheets)

• CSS의 확장 언어로, 더 강력하고 효율적인 스타일 작성을 지원
• CSS로 컴파일되어야 브라우저에서 사용 가능

2. 주요 특징 비교

• 변수 사용 : CSS - 제한적, SASS - 자유롭게 사용 가능
• 중첩 규칙 : CSS - 불가능, SASS - 가능 (코드 구조화에 유용)
• 믹스인 : CSS - 없음, SASS - 지원 (재사용 가능한 스타일 그룹 정의)
• 함수 : CSS - 제한적, SASS - 다양한 내장 함수 및 사용자 정의 함수 지원
• 수학 연산 : CSS - 제한적, SASS - 복잡한 수학 연산 가능
• 파일 분할 : CSS - 불가능, SASS - @import를 통한 모듈화 지원

3. 문법 예시

CSS

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.button:hover {
  background-color: #0056b3;
}

SASS

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;

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

4. 장점

CSS

• 브라우저가 직접 해석 가능
• 학습 곡선이 낮음

SASS

• 코드의 재사용성, 유지보수성 향상
• 복잡한 스타일 작성 용이
• 대규모 프로젝트에 적합

5. 단점

CSS

• 대규모 프로젝트에서 유지보수 어려움
• 코드 재사용성 낮음

SASS

• 컴파일 과정 필요
• 추가 학습 필요

6. 정리

• SASS는 CSS 기능을 확장하여 더 효율적이고 유지보수가 쉬운 스타일 작성을 가능하게 함
• 특히 대규모 프로젝트, 복잡한 스타일링 작업에서 장점이 두드러짐