Sass의 도입 난이도를 낮추는 툴들

Sass란?

"Syntactically Awesome StyleSheet"의 약자로, CSS를 효율적으로 기술할 수 있도록 설계·개발된 Ruby제의 CSS메타언어
Sass 공식

Sass의 문제점

Sass에 한하지 않고, CUI에서 터미널을 열고 명령을 치는 것은 초보자에게는 상당히 어렵습니다.
이번에는 그런 Sass를 간단하게 사용할 수 있는 툴을 소개합니다.

Sass를 GUI에 사용할 수있는 도구

Prepros

Sass를 「Process File」이라고 하는 버튼을 클릭하는 것만으로, CSS 파일을 생성해 준다,
초보자에게는 매우 기쁜 기능이 붙은 텍스트 에디터.
29달러의 과금을 하지 않으면 광고가 나옵니다만, 우선은 사용해 보면 좋을 것입니다.

SassMeister

화면 왼쪽에 Sass 코드를 입력하는 것만으로 오른쪽에 CSS 코드를 내보내주는 웹 서비스.
액세스하고 바로 사용할 수 있으므로 Sass의 코드를 CSS라면 어떻게 될지 시도하고 싶을 때 유용합니다.

Codepen

Codepen에서는 Sass를 사용할 수 있지만, 그 Sass의 코드를 CSS 코드로 보고 싶을 때,
「View Compiled CSS」라고 하는 버튼을 클릭하는 것만으로, CSS 표시해 줍니다.
Codepen은 스 니펫으로도 사용할 수 있으므로 이것을 사용하지 않는 손은 없을 것입니다.

요약

이번에 소개한 것 외에도, 텍스트 에디터에 따라서는 확장 기능으로 Sass를 자동 컴파일해 주는 것도
있으므로 조사해 봐도 좋을 것입니다.
프런트 엔드나 Web 제작자를 목표로 하는 사람은 Sass를 사용할 수 있는 것은 필수의 스킬이기도 하기 때문에,
처음에는 이러한 도구를 사용하면서 조금씩 익숙해 갑시다!