[SASS] SASS 프레임웍 설치
+ 부트스트랩 연동
4/15 개발일기
어제까지 git server 를 세팅하고, 그리고 spring+mybatis 개발환경을 셋팅했다. 오늘 오전에는 어제까지 구축해놓은 개발환경에 사내 테스트 DB를 연결하여 간단히 데이터를 뿌리는 실습까지 진행했다. 그런데 그러고나니, 게시판이 너무나 휑-하여, 리뉴얼할 때 메인으로 쓸 bootstrap 을 넣어 프론트엔드도 꾸며보자- 하던 참에, 얼마 전 귓등으로 들었던 SASS Framework 도 한번 도입해보자 싶었다.
그런데 sass-bootstrap 관련 내용은 국내 블로그에 많지가 않았다. 그래서 이번 건 좀 자세하게 기록해놓으려고 한다.
1. Windows 에 SASS 설치
먼저 Ruby 를 설치해야 한다. Ruby 는 아래 링크에서 다운로드하자
Ruby 를 설치한 후(설치할 때 add 어쩌구 PATH 요쪽 설정에 체크 할 것) 명령 프롬프트(이하 cmd)를 열어 아래와 같이 입력하면 SASS가 자동으로 설치된다.
(명령어 실행 위치는 아무곳이나 된다. 상관없음)
c:\Users> gem install sass
그리고 아래 링크에서 compass.app을 설치한다.
2. Bootstrap for SASS 설치
github에 소스가 있다. 여기에서 우측 상단의 [Download ZIP]을 눌러 다운로드 받는다.
3. SASS 실행
스타일시트를 작성하고 싶은 위치에 scss 파일을 생성한다. 예컨대 c:\Users\Project\web\WEB-INF\Resource\stylesheets 에서 sass-test.scss 를 생성한다면, 명령 프롬프트에 아래와 같이 실행하여 SASS가 자동으로 컴파일할 수 있도록 설정한다.
c:\User\Project\web\WEB-INF\Resource\stylesheets> sass --watch sass-test.scss:style.css
위 내용은 sass-test.scss 를 style.css 로 컴파일 하라는 뜻이다. sass-test.scss 에 간단한 css를 입력한 후 style.css 로 잘 동작하는 지 확인한다.
예제(sass-test.scss)
$pink: #ea4c89;
p {
color:$pink
}
이렇게 작성하고 저장했을 때, 동일 폴더에 style.css에 아래와 같이 입력되어 있으면 정상적으로 컴파일된 것이다.
결과(style.css)
p{
color:#ea4c89;
}
4. Bootstrap 연동
별것도 아닌데 사실 여기서 많이 헤맸다. 다운받은 bootstrap 의 asset\stylesheets 안의 폴더를 내 프로젝트의 stylesheets 폴더로 복사한다. 구조는 이런 식이 된다.
그런 후 sass-test.scss 상단에 아래 코드를 입력한다.
@import "bootstrap"
@import "bootstrap-compass"
(사실 왜 bootstrap_compas 가 필요한 지 잘모르겠다. compas 를 나는 왜 설치한 건지도 모르겠다. 하지만 compas를 설치하고 import 했을 때, 위 설정이 정상 동작했다. 설치하지 않고 bootstrap 만 import 하면 자꾸 오류가 발생했다...히유.)
5. 화면으로 출력하기
sass 는 css 전처리이기 때문에 어쨌든 브라우저에서는 컴파일된 css 파일만을 본다. 우리는 .java를 작성하지만, 서버에는 컴파일된 .class 파일을 업로드하는 것과 마찬가지. 그러므로 jsp에서 css를 갖고 올 때는 scss 파일이 아닌 컴파일된 css를 갖고 오게끔 한다.
<link href="../resources/stylesheets/style.css" rel="stylesheet">
그러면 이렇게 예쁘게 부트스트랩이 적용되어 화면이 출력된다.
