SASS, SCSS와 CSS

1. CSS (Cascading Style Sheets)

기본 개념:

css는 html 또는 xml 문서의 스타일을 지정하는 언어이다. 색상, 폰트, 레이아웃 등 웹 페이지의 시각적인 요소를 정의한다.

특징:

• 단숨함: css는 직관적이고 간단하며, 웹 페이지의 스타일을 정의하는 기본적인 방법이다.
• 브라우저 지원: 모든 웹 브라우저에서 기본적으로 지원된다.
• 한계: 변수, 중첩, 상속 등의 기능이 없어 코드의 재사용성과 유지보수성이 떨어진다.

예시:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}

2. Sass(Syntactically Awesome Stylesheets)

기본 개념:

Sass는 css의 전처리기(preprocessor)로, 더 복잡한 스타일 시트를 작성할 수 있게 해주는 기능을 추가한 언어이다. Sass 파일은 컴파일 과정을 거쳐 일반 css로 변환된다.

특징:

• 변수: 재사용 가능한 값을 변수로 저장할 수 있다.
• 중첩: css 선택자를 중첩하여 코드 구조를 더 직관적으로 만들 수 있다.
• 믹스인: 여러 스타일 속성을 한 곳에서 정의하고 재사용할 수 있다.
• 상속: 스타일을 다른 클래스나 요소에 상속할 수 있다.

Sass 문법:

Sass는 두 가지 문법을 지원하며, 기본 Sass 문법은 중괄호 {}와 세미콜론 ; 없이 들여쓰기로 구조를 표현한다.

예시:

$primary-color: #333

body
  font-family: Arial, sans-serif
  background-color: #f0f0f0

h1
  color: $primary-color

3. SCSS (Sassy CSS)

기본 개념:

SCSS는 Sass의 확장판으로, css와 완전히 호환되며 중괄호와 세미콜론을 사용하는 문법이다. 이는 기존의 css 코드오 쉽게 통하할 수 있도록 해준다.

특징:

• css와의 호환성: 기존 css 문법을 그대로 사용할 수 있어 기존 코드의 이식이 용이하다.
• Sass 기능 포함: 모든 Sass 기능을 지원한다.

SCSS 문법:

SCSS는 css와 유사한 문법을 사용하여 Sass의 모든 기능을 제공한다.

예시

$primary-color: #333;

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: $primary-color;
}

비교

• css는 기본 스타일 시트 언어로 단순하지만 제한적이다.
• Sass는 더 많은 기능을 제공하며, 간단한 문법으로 중첩과 같은 기능을 지원한다.
• SCSS는 Sass의 모든 기능을 포함하면서도 기존 css와 완벽히 호환되는 문법을 사용한다.

이와 같은 차이로 인해, Sass/SCSS는 더 복잡한 스타일을 관리하고 재사용 가능한 코드를 작성할 수 있게 도와준다. 반면에 css는 직접적인 접근이 가능하고, 추가적인 컴파일 과정 없이 바로 사용될 수 있다.