SASS의 소개와 사용방법

안녕하세요. 

오늘은 SASS에 대해 알아보겠습니다. 

SASS란?

• CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.
• 기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 
• 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 
• 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다.

SASS홈페이지

• http://sass-lang.com/

SASS 설치방법

• 윈도우에서 설치 방법
  - http://rubyinstaller.org/에 방문해서 ruby를 설치한다.
  - 윈도우키+R키를 누르고 cmd를 입력한다.
  - gem install sass 를 입력해서 sass 컴파일러를 설치한다. (gem은 ruby의 패키지 매니저입니다.)
  
  
• 맥(리눅스)에서 설치 방법
  - 맥과 리눅스에는 ruby가설치 되어 있기 때문에, gem install sass를 입력해서 sass 컴파일러를 설치한다. 

SASS 사용방법

• 아래는 style.scss 파일이 변경될 때마다 자동으로 style.css파일로 변환해주는 명령
  - $ sass --watch style.scss:style.css
• 아래는 stylesheets/sass 디렉토리에 있는 모든 sass 파일을 CSS로 변환한 후에 stylesheets/compiled 디렉토리로 이동하는 명령
  - $ sass --watch stylesheets/sass:stylesheets/compiled
• 아래는 현재 디렉토리에 있는 모든 sass 파일을 css파일로 변환하는 명령 - $sass --watch .:.

(Sass 컴파일러는 --watch 옵션을 통해서 사스파일을 감시하다가 그 파일이 수정되면 자동으로 CSS로 변환해주기 때문에 html에서는 컴파일된 CSS를 인클루드해서 페이지가 잘 렌더링되는지 확인하고, 이 CSS파일을 그대로 서버에 반영하면 됩니다. )

CSS만 사용한 기존의 프로젝트에 SASS 적용 방법

• http://css2sass.heroku.com/

SASS이 장점

• 코드 중복을 줄일 수 있습니다.
  - CSS의 특성으로 인해서 셀렉터를 중복해서 사용해야 하는 경우가 많은데 Sass의 Nesting을 이용하면 코드의 양을 줄이고 연관된 코드끼리 그룹핑할 수 있다.
  
  SASS 사용 전 코드 (코드가 복잡할수록 더 유지보수가 어려워 집니다.)
  

  #navbar {
  width: 80%;
  height: 23px;
  }
  #navbar ul {
  list-style-type: none;
  }
  
  SCSS 사용 후 코드
  
  #navbar {
  width: 80%;
  height: 23px;
  ul { list-style-type: none; }
  }

• 변수를 사용 할 수 있기 때문에 유지보수가 쉬워집니다.
  - CSS내에서 변수를 사용할 수 있다. 변수이름은 '$'로 시작해야 하고, 변수의 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 칼러(#ce4dd6)가 있다. 변수를 이용하면 크기나 색상과 같은 값을 일괄적으로 변경할 수 있다.

  $main-color: #ce4dd6;
  $style: solid;
  #navbar {
  border-bottom: {
  color: $main-color;
  style: $style;
  }
  }
  a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
  }

• 함수와 연산자를 사용 할 수 있습니다.

• 다양한 문법은 http://sass-lang.com/documentation/file.SASS_REFERENCE.html 를 참조해주세요. ^^
  
  

참조

• https://opentutorials.org/course/470/2488