SCSS & SASS - 개요

01.SCSS & SASS 란?

• CSS 전처리 도구이다.
• CSS가 동작하기 전에 사용하는 기능으로 웹에서는 분명 CSS가 동작하지만 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다.
• SASS문법이 기존의 CSS문법보다 쉽고 더욱 더 강력한 기능을 가지고 있다.

공식문서

• Sass 공식 홈페이지
• Sass & Scss 완전정복

02.SCSS & SASS 특징

• SCSS : 기존의 CSS와 호환이 되어 있어 사용이 용이하다.
• SASS : 들여쓰기로 코드들을 구분한다.
• SCSS는 표현(괄호,세미콜론) 이외에 기능은 Sass와 같다.
• 유일하게 다른 내용은 Mixins이다.

SASS

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

03.SASS 컴파일

• 사용자의 실제 웹 브라우저에서 사용할 수 있는 문법은 CSS 이므로 SASS로 작성된 문법을 CSS문법으로 변환해주는 컴파일을 해줘야 한다.
• SCSS(Sass) : CSS Preprocessor (CSS 전처리기) ⇒ CSS (변환 = 컴파일)

04.SCSS로 작성하는 이유?

• 조상요소들의 선택자들을 반복하는 내용들을 중첩기능(Sass)으로 간편하게 줄여서 사용 가능
• 색들의 고유 번호들을 변수라는 개념으로 재활용하는 데에 유용하게 사용
• 순수한 CSS로만 작성할때 보다 불편한 부분들을 조금 더 손쉽게 작성해서 웹에서 동작될 수 있도록 하기 위해서 SCSS(Sass)를 사용.