[1강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의

Sass는 Syntactically Awesome Style Sheet라는 단어의 줄임말이며, 한글로 번역하자면 “문장 구성적으로 끝내주는 스타일 시트”라는 의미를 지닌다고 볼 수 있습니다.

"문장 구성적으로 끝내준다?"라는 의미는 사스를 학습하게 되면서 무슨 말인지 알게 될 것입니다.

웹사이트를 디자인할 때 가장 필수 요소 중 하나가 바로 스타일시트인데요.

이 스타일시트는 생각보다 단순하지만 웹사이트 규모가 커지게 되면, 소위 '노가다'하는 느낌이 들며, 심지어 코드 길이가 1000줄이 넘어가면 뭐가 뭔지 알 수 없는 경우도 생겨 버립니다. 하지만 사스를 활용하면 스타일시트 작업이 마치 프로그래밍하는 것처럼 체계적이고, 구조적으로 개발할 수 있게 됩니다.

사스에 대한 소개는 간단하게 여기서 끝내고 바로 시작해 볼까요?

1강에서는 SASS를 사용하기 위한 준비 단계에 대해서 학습해 보겠습니다. 

SASS는 일종의 컴퓨터 언어와 같은 성질을 가지고 있는데요. 이 말이 무슨말이냐면, SASS 파일은 단독으로 웹사이트에서 사용할 수 없다는 것입니다. 예를 들어, 컴퓨터 언어인 C의 경우 프로그래머가 소스코드를 입력하고 '.c'라는 확장자로 저장합니다. '.c' 확장자는 컴파일이란 과정을 통해 '.exe'란 파일로 변환되어야만 사용할 수 있습니다. 이처럼 SASS 파일도 '.sass' 또는 '.scss' 란 파일이 컴파일 과정을 통해서 '.css'로 변환되어야 사용할 수 있습니다.

PC에 SASS 설치하기

SASS를 PC에 설치하는 방법은 애플리케이션 방식과 커맨드라인 방식이 있다고 합니다.일반적인 HTML 파일과 CSS 파일은 Sublime text 3와 같은 에디터를 사용하여 웹사이트를 개발할 수 있지만, SASS는 컴파일러 없이는 무용지물이기 때문에 반드시 애플리케이션 방식을 사용하든지, 커맨드라인 방식을 사용하여 컴파일 과정을 거쳐야합니다. (사실 Sublime text에는 패키지로 sass를 받아서 사용할 수 있지만, 애플리케이션 방식이 더 편하므로..)

저는 이 방식 중에 Koala라는 애플리케이션을 사용해서 진행하도록 하겠습니다.  (오픈소스를 사랑합시다)

(http://sass-lang.com/install 참고)

설치 간단하죠? 그냥 다운받고 깔면 됩니다.

실행시키고 이 화면이 뜨면 성공하신겁니다. (참 쉽네요)

커맨드라인을 통해서 사용하려면 Ruby를 설치하셔서 진행하시면 됩니다. 이 방법은 다른 블로그에 정보가 많으므로 그걸 참고하셔서 진행하시면 됩니다!

SASS의 기초

앞에서는 SASS를 작성하기 위한 기초적인 컴파일러를 설치하였습니다.

이제 직접 SASS를 이용하여 CSS를 작성하는 방법을 간단하게 학습해보도록 하겠습니다.

앞선에서 SASS에는 두 종류의 파일이 존재한다고 했죠?

여기서 SASS에 왜 확장자가 두 종류가 있냐고 의문을 가지는 분이 계실겁니다. (사실 의문이 드셔야됩니다...)

결론부터 말씀 드리자면 SASS와 SCSS는 동일한 파일입니다. (너 뭐라고 하는거냐)

기다려보세요..ㅋㅋ

내부적으로 약간의 차이가 있는데요. SASS는 Syntactically Awesome Style Sheet (아까 했잖아 임마)의 준말이며, SCSS는 Sassy Cascading Style Sheet의 준말입니다. 어떻게 보면 말장난같은데, SCSS는 "멋진 CSS"로 해석할 수 있겠죠.

의미는 그렇다고 치고, 내부적으로 다른게 무슨말이냐!

우선 두 파일의 차이점은 중괄호({})와 세미콜론(;)의 유무라고 할 수 있습니다.

SASS 파일은 중괄호와 세미콜론이 존재하지 않고, SCSS는 존재합니다. 컴퓨터 프로그래밍에 관심이 있는 사람이라면 알 수 있을텐데요. Javascript와 파이썬의 차이라고 볼 수 있어요. 파이썬은 중괄호와 세미콜론이 없지만, 자바스크립트에는 중괄호와 세미콜론이 있죠. (집중해주세요. 이 작은 차이가 정말 엄청난 차이입니다.)

SCSS의 문법 구조

SASS의 문법 구조

첫 번째 예제와 두 번째 예제를 비교해 보면 중괄호와 세미콜론의 유무 이외에는 차이점이 없다는 것을 볼 수 있습니다. 이렇게 SASS를 이용하여 CSS를 개발할 때는 두 가지 방식 중 편리한 방식을 사용하면 됩니다. 

하지만 두 가지 방법을 혼용할 수 없습니다.

따라서 하나의 방법을 선택하는 경우 반드시 한 가지 방법만 사용하세요.

저는 scss를 선호하기 때문에 모든 코드를 scss 기반으로 작성하겠습니다.

제가 scss를 선호하는 이유는 sass처럼 세미콜론과 중괄호가 없으면 시작과 끝이 잘 구분이 안가고, 나중에 코드가 어지러워질 수 있기 때문입니다.

(자바스크립트를 사용할 때도 중괄호와 세미콜론을 생활화 합시다)

SASS는 프로그래밍 언어와 유사하게 변수(Variables)를 사용할 수 있으며, 중첩(Nesting) 방식으로 코딩할 수 있습니다. 또한 파일을 파편화(Partials)해서 다른 파일에 불러올 수 있습니다. 또한 믹스인(Mixins) 방식으로 CSS3 속성 중 브라우저별로 속성값을 지정하는 경우(예를 들어 border-radius와 같은 CSS3의 속성 등) 간단하게 처리할 수 있습니다. 또한 확장(extend)과 상속(Inheritance)을 이용하여 동일한 속성값을 반복적으로 사용할 경우 매우 편리하게 처리할 수 있습니다.

먼저 SASS 파일을 CSS 파일로 컴파일하기 위해 앞서 언급한 Koala라는 애플리케이션을 사용하여. 예제 파일들을 하나씩 실행하는 방법을 알아보겠습니다.

Sass 파일 컴파일 시 에러가 나는 경우가 몇 가지 있는데 가장 대표적인 원인은 아래와 같습니다.

1. 주석에 한글이 들어가 있는 경우(일본어, 중국어 등도 동일)

2. 변수를 잘못 설정한 경우

3. Output 경로를 잘못 설정한 경우

이외에도 에러가 나는 경우는 다양합니다만, 컴파일시 에러가 발생하게 되면 해당 원인에 대한 에러 코드를 보여주기 때문에 원일을 제거하면 에러가 발생하지 않을 겁니다.

Koala 설정된 모습

이제 마지막으로 SCSS로 된 파일의 output 경로를 설정해 주면 됩니다. SCSS 파일과 CSS 파일의 경로가 동일하더라도 상관은 없겠지만, 추후 관리를 위해서라면, 별도의 폴더에 분리해 주는 것이 좋습니다.

마지막으로 css 파일의 경로 설정 및 css 폴더에 파일 이름을 설정해주면 됩니다.

set Output Path를 선택하면, 저장될 폴더와 파일명을 설정해줄 수 있습니다. 저는 css폴더에 scss_test.css로 지정하는 모습입니다. 만약 scss 파일이 여러 개 있는 경우 각각의 파일에 대해서 경로를 설정해 주셔야 합니다.

여기까지 잘 따라오셨습니다. 이제 SASS를 사용할 준비가 됐습니다.

다음 강의에서는 이제 실제 SASS에 관한 기초지식을 학습해 보도록 하겠습니다.