SASS 시작하기 / SASS 설치 방법

SASS란?

SASS는 Syntactically Awesome Stylesheet

(문법적으로 끝내주는 스타일 시트)의 줄임말로

CSS 전처리기 입니다. CSS는 프론트엔드에서

강력한 기능을 가진 언어이지만 기본적인

프로그래밍 언어의 기능에는 한계가 있습니다.

예를 들어 반복문같은 제어가 필요할 때도

수작업을 반복해야 하므로 C나 자바같은

일반적인 프로그래밍 언어에 비해서

생산성이 낮습니다. 그런데 이는 CSS의

단점이라기 보다는 의도된 특징이라고 합니다.

CSS의 초창기 개발자들은 누구나

쉽게 받아들일 수 있는 언어를 개발하기를

원했습니다. 언어가 어려우면 대중적으로

성공하기 쉽지 않기 때문에 보통의 프로그래밍

언어가 가지는 구조를 의도적으로

상당수 제외시켰다고 합니다.

언어가 어려우면 구조가 좋지만 소수의

프로그래머들만 적응할 것이고

언어가 쉬우면 구조는 난해해지지만

다수의 대중이 사용할 수 있습니다.

웹문서는 프로그래머가 개발하는게 아니라

일반적인 디자이너, 마케터, 영업사원 등에게

개방되어 있어야 한다고 믿었던 것이고

그 결과는 성공적이었습니다.

하지만 웹 응용프로그램이 빠르게 발전하면서

웹사이트의 규모가 커지고 전문적인

프론트엔드 프로그래밍이 발달하면서

점차 고차원적이고 효율적인 언어를

원하게 되었는데요. 그런 맥락에서 나온게

CSS전처리기인 SASS입니다.

SASS는 자체 프로그래밍 문법으로

SCSS 확장자 파일의 소스코드를 작성한 후

CSS 파일로 컴파일 됩니다. CSS 파일이

바이너리 처럼 컴파일되는 개념입니다.

SASS를 사용하면 기존 방식보다

적은 코드와 시간을 들여도

많은 CSS를 작성 할 수 있습니다.

즉 프로그래밍 적인 갈증을

해소 시켜주는 전처리기 입니다.

오픈소스라서 무료로 사용할 수 있고

SASS의 문법은 하위 CSS를 모두 포함하여

CSS버전에 대한 안정성이 높습니다.

결론적으로 SASS를 왜 쓰냐? -

는 질문에 대한 답이 되는 것은

-> CSS를 빨리 작성할 수 있게 합니다.

복잡해진 CSS의 유지보수에 유리합니다.

CSS로 해결이 되는데 굳이 SASS를

쓰는 경우의 단점은?

-> SASS는 CSS의 확장이기 때문에

HTML과 CSS에 대한 기본지식이 필요함.

프로그래밍 언어를 알아야 한다.

*프로그래밍에 대한 어느정도

숙련도가 있는 개인이나 팀이 사용해야

원활한 개발이 진행 될 수 있습니다.

물론 디자이너들도 또 배우려면

얼마든지 배울 수 있습니다만,

개별 상황에 따라 판단해야 합니다.

SASS 설치 방법

과거에는 Ruby 로 많이 사용했는데

Ruby 가 점차 점유율을 잃어가면서

Dart 나 nodejs 등으로 플랫폼을 확장했습니다.

scss 를 컴파일하면 css.map과 css파일이

나오는데 꼭 Ruby에 얽매일 필요는 없습니다.

SASS를 설치하는 가장 쉽고 빠른 방법은

비주얼 스튜디오 코드에서 설치하는

Live Sass Compiler 확장 기능입니다.

실시간 컴파일이 가능해서 사용이 편리합니다.

비주얼 스튜디오 코드 설치는

아래 문서를 참고합니다.

HTML5 기초 | 비주얼 스튜디오 코드 설치와 초기설정, 테마, 실행 테스트

*HTML5 준비사항 HTML을 학습하기 위해서는 몇 가지 준비가 필요하다. 사실 무작정 메모장을 열고 HTML5 파일을 편집하거나, 온라인 IDE를 사용하는 것도 가능은 하지만 나에게 맞는 개발환경을 갖추

digiconfactory.tistory.com

그 밖에 여러 방법으로 설치가 가능합니다.

SASS 공식 웹사이트를 참고합니다.

(윈도우, MacOS, 리눅스)

https://sass-lang.com/install

크로스플랫폼에 간편하게 설치할 수 있는

dart-sass의 최신버전은 깃헙에서 다운받습니다.

https://github.com/sass/dart-sass/releases/latest

다운로드 받은 파일의 압축을 푼 다음

환경변수에 추가해주면 됩니다.

터미널에서 버전을 체크해서

제대로 나오면 설치가 된겁니다.

sass --version

커맨드 라인에서 watch를 시키면 scss파일을

실시간으로 css 파일로 컴파일해줍니다.

예를들어 아래와 같은 구조에서 컴파일을 합니다.

index.html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
   <h2>Hello SASS!</h2>
   <div class="container">
       SASS installation complete!
   </div>
    
</body>
</html>

styel.scss 파일

$primary-color: #063970;
$secondary-color: #abdbe3;
$std-font-size: 1.2em;

.container {
    color: $primary-color;
    background: $secondary-color;
    font-size: $std-font-size;
}

SASS 커맨드 라인