[자바스크립트] 노답 디자이너의 코딩 배우기 - Sass? SCSS? 전처리기 도구란?

SAS 파일은 무슨 뜻이야? SCSS랑 무슨 관련이 있지?

---

 

Sass(Syntactically Awesome Style Sheets, 줄여서 Sass)는 CSS를 더 효율적으로 작성할 수 있게 도와주는 CSS 전처리기입니다. Sass는 두 가지 문법을 지원하는데, 그 중 하나가 SCSS입니다. SCSS와 관련된 중요한 용어들을 하나씩 설명하자면:

 

1. Sass(SAS)

• Sass는 CSS를 더 강력하고 유연하게 사용할 수 있게 해주는 전처리기(preprocessor)입니다. CSS에 없는 여러 기능(변수, 중첩, 상속 등)을 추가해줍니다.

• Sass에는 두 가지 문법 스타일이 있습니다:

• Sass 문법(Sass Syntax): 원래의 Sass 스타일로, 중괄호 {}나 세미콜론 ; 없이 들여쓰기로 구조를 나타냅니다.

• SCSS 문법(Sassy CSS): CSS와 거의 유사한 문법을 사용하면서 Sass의 모든 기능을 사용할 수 있는 문법입니다.

 

2. SCSS (Sassy CSS)

• SCSS는 Sass의 확장된 문법으로, 기본 CSS 문법에 Sass 기능을 추가한 것입니다. CSS와 호환 가능한 문법을 갖고 있기 때문에 기존 CSS 파일도 그대로 SCSS 파일로 사용할 수 있습니다.

• SCSS 파일은 일반적으로 .scss 확장자를 사용합니다.

• SCSS 문법에서는 CSS처럼 중괄호 {}와 세미콜론 ;을 사용하기 때문에 CSS에 익숙한 사람들에게 더 친숙합니다.

 

Sass와 SCSS의 차이

• Sass 문법: 중괄호 {}와 세미콜론 ;을 생략하고, 들여쓰기로만 구조를 나타냅니다. .sass 확장자를 사용합니다.

// Sass 문법 예시
.navbar
  background-color: #333
  .menu
    display: flex

 

• SCSS 문법: CSS처럼 중괄호 {}와 세미콜론 ;을 사용하며, CSS 파일과 호환됩니다. .scss 확장자를 사용합니다.

// SCSS 문법 예시
.navbar {
  background-color: #333;
  .menu {
    display: flex;
  }
}

 

요약:

• Sass는 전처리기 도구이며, CSS를 더 강력하게 사용할 수 있도록 돕습니다.

• **Sass 문법(SAS 파일)**은 들여쓰기로 스타일을 표현하며, **SCSS 문법(SCSS 파일)**은 CSS와 비슷한 방식으로 작성됩니다.

• SCSS는 Sass의 확장 문법으로, 기존 CSS를 그대로 사용할 수 있기 때문에 CSS 사용에 익숙한 사람들이 더 쉽게 적응할 수 있습니다.

 

결론적으로 SCSS는 Sass의 한 종류이며, CSS와의 호환성이 높고 더 친숙한 문법을 제공합니다.

 

 

전처리기 도구가 뭐하는 건데? 그게 무슨 뜻이야?

---

전처리기 도구는 프로그래밍이나 웹 개발에서 원시 코드(작성된 코드)를 실제 사용 가능한 형태로 변환해주는 도구를 말합니다. 이 경우, CSS 전처리기는 우리가 작성한 코드를 브라우저가 이해할 수 있는 순수 CSS 파일로 변환해주는 역할을 합니다.

 

전처리기의 역할을 쉽게 설명하면:

1. 개발자가 작성한 코드: 우리가 작성하는 SCSS나 Sass 같은 언어는 더 효율적으로 스타일을 작성할 수 있도록 다양한 기능을 제공하지만, 브라우저는 이를 바로 이해할 수 없습니다.

2. 전처리기 도구의 변환 작업: 전처리기 도구(Sass, Less 등)가 개발자가 작성한 SCSS/Sass 파일을 읽어서, 브라우저가 이해할 수 있는 순수한 CSS 코드로 변환해줍니다.

3. 최종 출력물: 전처리기를 거친 결과는 표준 CSS로 컴파일되며, 브라우저는 이 CSS 파일을 읽어 실제로 페이지에 스타일을 적용하게 됩니다.

 

전처리기 도구가 필요한 이유

 

CSS는 기본적으로 강력한 기능이 많지 않기 때문에 복잡한 스타일을 관리하기 힘듭니다. Sass나 SCSS 같은 전처리기는 이를 보완해 여러 가지 추가 기능을 제공하며, 아래와 같은 이점이 있습니다:

• 변수 사용: 색상, 글꼴 크기 등 여러 곳에서 사용하는 값을 변수로 정의해 재사용할 수 있습니다.

• 중첩(Nesting): HTML 구조에 맞게 스타일을 중첩해서 작성할 수 있습니다. 이는 코드의 가독성을 높여줍니다.

• 모듈화: 스타일을 여러 파일로 나눠 관리하고, 필요할 때마다 불러와서 사용할 수 있습니다.

• 반복되는 코드 줄이기: mixin이나 함수 등을 사용해 반복되는 코드를 최소화하고, 코드의 재사용성을 높입니다.

• 연산 가능: 수학적 계산을 통해 크기, 간격 등을 동적으로 설정할 수 있습니다.

// scss 예시
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  padding: 10px;
  border-radius: 5px;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

위 코드는 Sass 전처리기로 컴파일되어 브라우저가 읽을 수 있는 CSS로 변환됩니다:

 

// css 예시
.button {
  background-color: #3498db;
  padding: 10px;
  border-radius: 5px;
}
.button:hover {
  background-color: #2c80b9;
}

 

전처리기의 실제 과정:

1. SCSS 파일을 작성하고,

2. 전처리기 도구(예: Sass CLI, Webpack의 Sass loader 등)를 사용해 SCSS를 CSS로 변환하고,

3. 변환된 CSS 파일을 브라우저가 읽어서 스타일을 적용합니다.

 

요약:

 

전처리기 도구는 우리가 작성한 복잡한 SCSS/Sass 코드를 브라우저가 이해할 수 있는 단순한 CSS로 변환해주는 도구입니다. 이를 통해 코드를 더 효율적이고 유지보수하기 쉽게 만들어주는 것이 전처리기의 주요 역할입니다.