[CSS] CSS? SCSS? SASS? 총 정리

1. CSS 

CSS는 HTML 문서의 레이아웃과 스타일을 지정하는 데 사용되는 스타일 시트 언어입니다.

웹 페이지의 시각적 요소인 색상, 글꼴, 여백 등을 설정할 수 있으며 브라우저가 이해할 수 있는 기본 스타일링 언어로 전 세계적으로 널리 사용되고 있습니다.

 

장점	단점
모든 브라우저에서 지원되며 웹 표준을 준수하므로 거의 모든 웹 사이트에서 사용 가능 기본적인 스타일링을 적용하는 데 아주 간단하다. HTML 파일에 링크하여 사용하는 방식으로 별도의 설정이 필요하지 않으며 웹 개발을 시작하는 초보자도 쉽게 접근 가능 캐스케이딩(Cascading)으로 스타일 규칙이 여러 곳에서 적용될 때 우선순위를 자동으로 계산하여 최종 스타일 결정	변수, 조건문, 반복문과 같은 기능이 없기 때문에 스타일을 반복해서 작성해야 하는 경우가 많아 재사용성이 낮음 중첩이나 모듈화와 같은 기능이 없어서 스타일이 복잡해질수록 파일이 비대해지고 유지보수가 어려움 대규모 프로젝트에서 코드가 뒤엉키고 유지보수가 어려움

 

사용 예시

.header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.header h1 {
  font-size: 24px;
}

 

 

 

2. SASS (Syntactically Awesome Style Sheets) 

SASS는 CSS의 단점을 보완하고자 만든 스타일링 언어로 CSS에 없는 변수, 중첩, 조건문, 반복문 등을 추가하여 복잡한 스타일 작업을 쉽게 할 수 있게 합니다. SASS는 간결한 구문을 사용하며 CSS로 컴파일되어 웹 브라우저에서 사용됩니다.

 

생긴 배경

CSS는 웹 스타일링을 관리하기에 간단하고 편리했지만 프로젝트가 커지면서 복잡한 스타일링 작업을 효과적으로 처리하기에는 한계가 있었습니다. 이를 해결하기 위해 2006년에 개발자 Hampton Catlin이 CSS를 확장한 형태로 SASS를 개발했습니다. SASS는 CSS의 한계를 보완하기 위해 변수를 사용할 수 있도록 하고 중첩, 조건문, 반복문, 믹스인(Mixin) 등의 기능을 추가했습니다.

 

장점	단점
변수를 통해 자주 사용되는 값들을 저장하고 재사용 가능 스타일을 중첩하여 작성할 수 있어 가독성이 높고 구조화가 용이, 중첩을 통해 스타일 계층을 만들 수 있으며 특히 CSS 클래스가 여러 단계로 계층화된 경우에 유용 믹스인은 재사용 가능한 스타일 블록을 만들어 여러 곳에서 사용이 가능, 스타일 블록에 인수를 전달하여 상황에 맞게 수정 가능 다양한 내장 함수를 제공하며 스타일 값에 대해 산술 연산도 가능 여러 파일로 스타일을 나누어 작성 가능, @import를 사용해 스타일 파일들을 불러와서 구조화된 스타일링 가능	SASS 파일은 브라우저에서 직접 읽을 수 없기 때문에 CSS로 컴파일해야 하고 SASS를 사용하려면 별도의 컴파일러나 빌드 도구가 필요 CSS보다 구문이 간결하지만 SASS의 고유 기능을 모두 이해하고 사용하는 데는 추가적인 학습이 필요

 

예시

$primary-color: #333;

.header
  background-color: $primary-color
  color: #fff
  padding: 10px

  h1
    font-size: 24px

 

 

 

3. SCSS (Sassy CSS)

SCSS는 SASS의 새로운 문법으로 기존 CSS의 문법을 그대로 유지하면서 SASS의 기능을 확장한 버전입니다. CSS 파일처럼 중괄호 { }와 세미콜론 ;을 사용하면서도 SASS의 변수, 중첩, 믹스인 등을 사용할 수 있습니다. 결과적으로 SCSS는 기존 CSS와의 호환성을 극대화하며 SASS의 모든 기능을 제공합니다.

 

생긴 배경

SASS는 CSS에 대한 확장 기능을 제공했지만 CSS와는 구문이 달라서 기존 CSS 코드를 SASS로 변환하는 데 어려움이 있었습니다. 2009년에 SASS 3.0 버전에서 SCSS(Sassy CSS)라는 새로운 구문이 추가되었는데 이는 CSS의 기존 문법과 호환되도록 만들어졌습니다. CSS를 그대로 가져와서 SASS의 기능을 사용할 수 있도록 확장된 문법으로 SASS의 기능은 그대로 유지하면서도 CSS의 문법을 사용하므로 CSS와의 호환성이 강화되었습니다.

 

장점	단점
CSS의 확장 기능으로 CSS와 호환이 매우 잘 되어 CSS 파일을 SCSS 파일로 쉽게 변경 가능 SASS의 기능을 그대로 사용하며 중괄호 { }와 세미콜론 ;을 사용하므로 기존 CSS를 사용하는 개발자들이 쉽게 적응 가능 CSS 구문에 익숙한 사용자가 SASS의 확장 기능을 바로 사용할 수 있어 기존 CSS 코드의 유지보수와 확장성이 크게 향상	SCSS 역시 브라우저에서 직접 인식되지 않으며 CSS로 컴파일하여 사용해야 함 중첩 기능을 제공하지만 중첩을 너무 깊게 할 경우 코드가 비대해지고 가독성이 떨어짐

 

예시

$primary-color: #333;

.header {
  background-color: $primary-color;
  color: #fff;
  padding: 10px;

  h1 {
    font-size: 24px;
  }
}

 

 

 

차이점 요약

항목	CSS	SASS	SCSS
구문	기본 CSS 문법	간단한 구문, 중괄호와 세미콜론이 없음	CSS와 동일한 구문, 중괄호와 세미콜론 사용
변수	지원하지 않음	지원	지원
중첩	지원하지 않음	지원	지원
재사용성	제한적	믹스인(Mixin), 함수 등을 통해 재사용 가능	믹스인(Mixin), 함수 등을 통해 재사용 가능
컴파일	필요 없음	CSS로 컴파일 필요	CSS로 컴파일 필요
브라우저 호환	모든 브라우저에서 지원	직접 지원되지 않음	직접 지원되지 않음
용도	간단한 스타일 적용	대규모 프로젝트에서 복잡한 스타일 관리	CSS와의 호환성이 필요한 대규모 프로젝트