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

Sass 강의

변수(Variables)

프로그래밍 언어에서 가장 많이 사용되는 부분이 바로 변수입니다. 변수를 이용하면 변수값만 변경함으로써 결과를 다르게 만들 수 있듯이, SASS에서도 반복적으로 많이 사용되는 부분, 예를 들어 font 모양이나 색상들을 변수로 지정해 놓고 이 변수값만 변경해 주면 CSS를 정말 간단하게 제어할 수 있습니다.

SASS에서는 변수를 정의할 때 $ 기호를 사용합니다. 변수의 이름은 사용자에 의해서 지정할 수 있지만, 속성은 CSS의 속성을 지정해 줘야 합니다. 밑에 예제를 보도록 하겠습니다.

위 예시를 보면 $font_stack 이라는 변수와 $primary_color 라는 변수가 있습니다.

각 변수들에는 CSS의 속성을 적용했습니다.

$font_stack에는 Helvetica라는 sans-serif 계열의 글꼴이, $primary_color에는 청록색이 지정되어 있습니다.

컴파일되면 다음과 같은 결과를 얻을 수 있습니다.

속성이 잘 정의된 것을 보실 수 있습니다. 이 변수 부분만 알고 있어도, CSS를 코딩할 때 엄청 편리하게 사용할 수 있습니다. 예를 들어 font의 색상이나, div 또는 span이라는 선택자에 지정된 배경 색상, 그리고 다양한 선택자에 지정된 속성을 변수로 지정해 줌으로써, 변수에 있는 속성만 변경하면 전체 CSS의 속성을 한번에 변경해 줄 수 있기 때문입니다.

중첩(Nesting)

HTML 코딩을 하다 보면 중첩적인 표현을 위해 하위 선택자를 많이 사용할 수 밖에 없습니다. 예를 들어, nav 태그를 이용해서 네비게이션을 만들 때 ui와 li라는 태그 선택자가 있는데, 이 두 선택자는 nav의 하위 선택자입니다.

아래 코드의 예로 설명하도록 하겠습니다.

HTML 태그 부분에 CSS 속성을 적용해 보도록 하겠습니다.

CSS를 적용한 결과는 다음과 같습니다.

결과를 확인했으니, 이제 중첩에 대해서 배워보도록 할게요.

SASS의 중첩은 코드를 아주 간략하게 만들어 줍니다. 중첩이라는 것은 알을 품는 형태를 의미하며, 하위 선택자를 안에 품는다는 의미를 지니고 있어요.

위 코드를 직접 컴파일 해보면 동일한 결과가 나온다는 것을 알 수 있습니다.

중첩의 장점은 코드의 길이를 많이 줄여줄 수 있다는 것과 HTML의 박스 모델에서 각 박스에 있는 개별 태그에 정확한 값을 지정해 줄 수 있습니다.

예를 들어, header라는 박스 모델 내부에 nav가 있고, nav 태그 내에 li와 a와 같은 코드로 구성되어 있고 하단 부분에 aside라는 박스 모델에 또한 동일한 태그 구성이 되어 있는 경우 header 부분에 있는 nav 태그와 aside에 있는 nav 태그에 별도의 속성을 확실하게 구분하여 처리할 수 있습니다

바로 예시를 보면서 설명할게요.

위 예시를 보면 header 태그와 aside 태그에 동일하게 nav 태그와 하위 태그인 ul, li 그리고 a 태그로 구성된 코드를 볼 수 있습니다. 여기서 header 태그 부분은 사이트의 헤더 부분이고, aside 부분은 서브 메뉴가 위치하는 곳입니다. 일반적으로 헤더 부분에는 메인 메뉴가 들어가는데, 메뉴는 보통 가로 배열이 들어갑니다. 서브 메뉴 부분은 세로 배열을 하는 것이 일반적인 방법입니다.

이제 HTML 마크업을 진행했으니, CSS로 스타일을 내볼까요.

CSS로 스타일을 꾸며주면 결과물이 위와 같이 나옴을 볼 수 있습니다. SASS로 간편하게 코딩을 했는데 그러면 CSS로 어떻게 컴파일 됐는지 확인한번 해보겠습니다.

이렇게 반복적으로 들어가는 속성들을 미리 정의해놓고, 필요할 때 불러다가 쓰면 매우 간편하게 코딩을 할 수 있습니다.

부분화(Partials) / 불러오기(Import)

SASS로 작업을 하다 보면 문장이 상당히 길어지고 복잡하게 되어 문장을 분리할 필요가 있습니다. 이때 문장을 분리하는 것을 '부분화'라고 합니다. 이렇게 부분적으로 쪼갠 SASS 문장을 하나의 문장에 불러오기를 한 후 컴파일 과정을 거치면, 하나의 CSS 파일로 변환되는 것입니다.

전에 작업한 파일을 보면 색상들을 별도의 변수로 처리한 부분이 있습니다. 이 부분을 부분화를 하여 별도의 파일로 만들고 불러오기를 해볼게요.

먼저 새로운 파일을 생성하고 "변수로 처리한 부분"만 Copy & Paste를 합니다. 그리고 파일 이름은 _color.scss라고 합니다.

여기서 부분화를 할 때 가장 중요한 것은 바로 파일 이름입니다.

부분화를 하는 파일 이름은 앞 부분에 반드시 "_(언더바)"를 추가해야 합니다. 그래야 이 부분이 부분화 파일이구나 라고 알 수 있습니다. 언더바를 추가하지 않으면 하나의 CSS 파일로 컴파일이 되어 버립니다.

CSS 파일의 경우에도 보통 CSS 파일 내부에 불러오기를 하는 방법이 있습니다. 이 경우에도 import를 이용해서 처리하게 되는데, CSS의 경우에는 @import url(color.css); 라고 지정해 줍니다.

SASS에서는 @import 'color'; 라고 처리해 줍니다. 확장자는 없습니다. 부분화를 할 때는 파일명 앞에 _(언더바)를 붙이지만, import를 할 때는 "_(언더바)"을 쓰지 않습니다. 이 부분이 바로 CSS에서의 import와 다른 부분입니다.

믹스인(Mixins)

믹스인은 브라우저별 접두사를 처리해야 하거나 반복적인 속성을 손쉽게 처리할 수 있게 해주는 역할을 합니다.

예를 들면 border-radius라는 CSS3의 속성은 사각형의 모서리를 둥글게 만들어 주는 속성입니다. 이 속성은 구글과 사파리 브라우저에는 -webkit-이란 접두사가 붙고, 파이어폭스는 -moz- 라는 접두사가, IE 계열은 -ms- 라는 접두사가 붙게 됩니다.

최신 브라우저에서는 위 접두사가 없어도 브라우저에서 CSS3의 속성을 지원해 주기 때문에 필요 없을 수 있지만, 구 버전 브라우저까지 고려하려면 이 접두사를 지정해 주는 것이 좋습니다. (크로스 브라우징 이슈를 해결하기 위해 필요)

접두사는 크롬 > 사파리 > 파이어폭스 > IE계열 > CSS3 순으로 배열하는 것이 제일 좋습니다.

믹스인을 이용해서 브라우저별 접두사를 처리했습니다.

border-radius라는 속성에 별도의 접두사를 처리하는 부분에 변수로 $radius를 지정했고, .box 선택자 부분에 변수를 10px로 지정했습니다.

SASS의 가장 큰 장점은 반복되는 작업을 최대한 줄여주고, 생산성을 높이며, 작업의 효율성을 극대화하는 데 있습니다.

SASS 문법에는 프로그래밍 언어에서 사용되는 "if문" 그리고 "while문"과 같은 프로그래밍 기법들이 있습니다. 이러한 프로그래밍적 특성을 잘 활용하면, 아주 적은 코드를 이용해서 CSS의 결과값을 극대화할 수 있습니다.

확장(Extend) / 상속(Inheritance)

SASS에서 변수와 중첩, 부분화와 불러오기 그리고 믹스인까지 배워봤는데요.

이번에는 확장과 상속에 대해서 다뤄보겠습니다. 

nav 태그 선택자의 하위 선택자로서, ul와 li의 속성이 비슷한 것들이 있는데, "이 부분을 묶어서 사용하면 얼마나 편리할까"라는 생각을 할 수도 있습니다.

SASS에서는 확장과 상속을 통해 편리하게 비슷한 코드를 통합할 수 있습니다. CSS의 속성은 위에서 아래로 적용됩니다. 

간단하게 공부 한번 하고 갑시다.

위 코드처럼 CSS를 적용시키면 어떻게 될까요?

top down 방식에 의해 결과 값은 아래와 같이 변화됩니다.

"이걸 왜 이렇게 까지 강조하지?" 라고 생각을 하시는 분도 있을 수 있습니다. 하지만 CSS를 학습하는데 있어서 이 개념을 꼭 머릿속에 넣고 계시기 바랍니다. 간혹 원하는 속성이 안먹히는데, 이유가 뭔지 찾다보면 이런 경우가 생각보다 많을테니까요.

동일한 선택자의 속성값을 여러 번 변경하더라도, 결과값은 가장 마지막에 있는 값의 영향을 받습니다. 이 이야기는 CSS라는 단어를 풀어보면 단박에 이해하실 수 있어요. Cascading Style Sheets 에서 Cascading이 바로 이 의미입니다. 아래로 내려가면서 스타일을 적용한다.

다시 코드로 돌아가면 padding 값과 color 값은 하단에 없기 때문에 그대로 반영되지만, margin 값은 하단에 20px로 변경되어 최종 결과는 저렇게 속성이 반영되는거죠.

이러한 설명을 하는 이유는 확장과 상속을 이해하기 위해서 꼭 필요하기 떄문입니다.

SASS에서 확장은 @extend 라는 코드를 사용합니다.

위 코드를 보면 .message 선택자를 이용해서 작은 박스를 만들 수 있는 CSS 코드를 볼 수 있습니다. 이게 가장 기본이라고 볼 때 3개의 동일한 작은 박스를 만들기 위해 .success, .error 그리고 .warning이라는 선택자를 추가했는데, 여기에 @extend .message라고 해서 .message 선택자의 속성을 그대로 가져왔는데, 각 박스에는 별도의 테두리 색상을 지정해 줬습니다.

결과 값은 아래와 같이 나옵니다.

확장과 상속을 이용해서 코드를 좀 더 효율적으로 개선할 수 있습니다.

전에 진행했던 nav 코드를 좀 더 효율적이게 개선해볼게요.

header라는 태그 선택자 밑에 있는 nav 태그 선택자의 속성을 별도로 분리해서 header 선택자 부분에 @extend nav;라고 처리했으며, aside 부분에도 @extend nav;라고 처리했습니다. 여기서 header nav에 있는 속성과 aside nav에 있는 속성들이 동일한 부분도 있지만, 동일하지 않는 부분은 aside 부분에서 별도의 속성을 다시 지정했습니다. 이렇게 하면 header 부분과 aisde에 있는 nav 태그 서낵자 속성에서 동일하게 적용되는 값을 변경할 때 nav 태그 선택자 부분에서 코드 한줄을 추가하거나 값을 변경하면, header와 aside에 있는 nav 부분도 동일하게 값이 변경됩니다.

사이트가 커지면 커질수록 CSS 관리가 편리해진다는 것을 의미합니다 !

연산자(Operators)

SASS는 프로그래밍적 요소가 있기 때문에 간단한 사칙연산이 가능합니다. 즉 더하기, 빼기, 곱하기, 나누기 그리고 퍼센트 처리가 가능합니다 ! 이 연산 기능은 CSS를 사용하여 레이아웃을 작업할 때 정말 편리하게 사용할 수 있고, 기타 여러 용도로 사용이 가능합니다 !

예를 들어 색상을 섞는 기능도 가능하죠. white와 black을 혼합하면 회색이 나오는데, 이런 용도로도 사용이 가능합니다.(신기하죠??)

웹사이트는 고정폭으로 사이트를 만드는 경우도 있지만 폭의 크기를 유동적으로 변경하는 경우도 있답니다. 웹사이트의 크기를 100%로 정하는 경우 포토샵을 이용해서 레이아웃을 정하면 콘텐츠가 들어가는 부분과 사이드 바의 크기 또한 유동적으로 변경해 줄 필요가 있습니다. 왜냐하면, 웹 브라우저의 크기가 커지거나 작아질 경우 콘텐츠 부분과 사이드 바의 크기 또한 유동적으로 변하게 처리해야 하기 때문입니다. 이 경우 연산 기능을 이용하면, 콘텐츠 크기를 쉽게 처리할 수 있습니다.

마무리

여기까지 SASS의 가장 기본적인 기능을 한번 봤는데요. 여기까지의 내용만 잘 익혀놓는다면 CSS 개발이 엄청 쉬워집니다. 

앞으로 SASS를 좀 더 보다 자세하게 익혀보면 더 편리하게 CSS 개발을 할 수 있습니다 !

앞으로 좀 더 쉬운 설명으로 진행하도록 해보겠습니다 !