SASS를 알아봅시다.

Syntext Awsome style sheet

SASS는 css의 preprofessor(전천후 처리기) 입니다. sass를 활용하면 css를 더욱 강력하게 구조화 시키는것이 가능합니다.

SASS to css compile

sass 파일은 css 로 컴파일 되어야 하며, 컴파일 할 수 있는 방법은 많이 있지만 그중에서 가장 쉽고 유용한 방법을 소개해드릴게요.

코알라 사용

코알라 라고 하는 프로그램을 사용하면 쉽게 SASS를 CSS로 컴파일 하는것이 가능합니다.

물론 서버사이드에서 여러가지 설정으로 컴파일 해주는 방법이 있지만, 처음 해보면 복잡할 수도 있고 어려울 수도 있습니다.

코알라 사용법은 매우 단순합니다.

코알라 프로그램 다운로드 : http://koala-app.com

<이미지>

• 왼쪽 상단 +표시를 누르면 scss를 추가 할수 있는 폴더가 나오며, 목록에 나타납니다.
• 목록에서 마우스 우측버튼으로 메뉴를 불러내면 아웃풋 css의 폴더를 설정할 수 있습니다.
• 우측메뉴에서 autocompile 을 선택해야 scss를 수정했을때 다른 작업없이 css로 변환됩니다.
• 옵션값은 필요에 따라 설정하시면 되지만 기본은 아무것도 체크 하지 않습니다.
• 아웃풋 은 css를 어떤식으로 출력할것이냐를 결정합니다. 압축모드와 확장모드 등이 있습니다.

SASS & SCSS

sass 와 scss의 개념에 약간의 혼동이 있을수 있습니다. 쉽게 풀어보자면 두개의 css preprofessor 는 같은 문법을 제공합니다. 하지만 sass가 등장하고 개발자들은 Sassy CSS 라고 하는 CSS 친화적인 구문을 제공하는 문법을 만들어냈습니다. SCSS가 나온 모토는 "유효한 CSS라면, 유효한 SCSS이다." 입니다.

따라서 BNK SYSTEM의 내부 규칙은 SCSS 에 조금더 가깝습니다.

SCSS 문법을 사용해야 하는 이유

SCSS의 구조는 매우 단순하며 구조적입니다. 이것은 곧 프로젝트의 생산성과 효율성이 높아지는 것을 의미합니다. 또한 갈수록 복잡해지고 있는 모바일 사이트의 스타일들을 어떻게 정리해서 효율적으로 유지보수를 할 것이냐는 문제는 아주 오래전부터 고민되어 왔으나, SCSS 의 구조화로 인하여 이러한 문제가 해결 되는 것이 가능합니다.

SCSS 와 CSS 의 문법 비교

CSS

1. .btn_close .bar_1 { -webkit-transform: translatey(7px) rotate(-45deg); -moz-transform: translatey(7px) rotate(-45deg); -ms-transform: translatey(7px) rotate(-45deg);
2. -o-transform: translatey(7px) rotate(-45deg); transform: translatey(7px) rotate(-45deg); }
3. .btn_close .bar_2 { visibility: hidden; opacity: 0; filter: alpha(opacity=0); }
4. .btn_close .bar_3 { -webkit-transform: translatey(-7px) rotate(45deg); -moz-transform: translatey(-7px) rotate(45deg); -ms-transform: translatey(-7px) rotate(45deg);
5. -o-transform: translatey(-7px) rotate(45deg); transform: translatey(-7px) rotate(45deg); }

SASS

1. .btn_close {
2. .bar_1 {
3. @include transform_ytype(7px, -45deg);
4. }
5. .bar_2 {
6. visibility:$hidden;
7. @include opacity(0);
8. }
9. .bar_3 {
10. @include transform_ytype(-7px, 45deg);
11. }
12. }

• SCSS는 CSS의 고질적 문제였던 중첩을 해결합니다.
• 들여쓰기 방식의 코딩으로 코드를 이해하기 쉬우며, 프로젝트간 소통에도 도움을 줍니다.
• MIX IN 기능으로 구조화된 코드를 인클루드 시킴으로서, 간결한 코드 작성이 가능합니다.