컴파일 - SassMeister

Sass(SCSS)는 웹에서 직접 동작할 수 없다.
어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 한다.
다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법을 소개하겠다.

 

SassMeister

간단한 Sass 코드는 컴파일러를 설치하는게 부담될 경우 SassMeister를 사용 할 수 있다.

페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환된다.
HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원하니 학습에 도움이 될 것이다.

www.sassmeister.com/

SassMeister | The Sass Playground!

 

사용한 예시)

/* SASS */
.container{
    width: 100px;
    .item{
        width: 200px;
    }
}

/* CSS */
.container {
  width: 100px;
}

.container .item {
  width: 200px;
}

다음과 같이 후손 선택자를 만들때, SASS에서는 container클래스 안에 item클래스를 선언하면 CSS로 알아서 변환이 된다.