[SASS] bootstrap-sass
커스터마이징
4/14 개발일기(2)
SASS 를 사용해보자. 아까는 sass-test.scss 로 생성했지만, 이제는 stylesheet.scss 로 이름을 변경하려고 한다. 이번에는 scss를 css로 컴파일할 때 아래 명령어를 쓰려고 한다.
c:\~\Resources\stylesheets> sass --watch .
위 명령어를 사용하면 해당 폴더에서 일어나는 scss 파일들의 변화를 모두 모니터링하고, scss 파일과 동일한 이름의 css를 컴파일해준다.
bootstrap에서 <body>의 기본 background-color 는 #ffffff(흰색) 이다. 그런데 나는 이걸 연한 회색(#f0f0f0)으로 변경하고 싶다. 그러면 아래와 같이 입력해주면 된다.
예제(stylesheet.scss)
$body-bg:#f0f0f0;
@import "bootstrap"
@import "bootstrap-compass"
그런데 이런 변수 하나하나를 어떻게 다 아느냐고?
bootstrap\ 안에 _variables.scss 파일을 열어보면 된다. 거기에 빼곡하게 변수가 지정되어 있다. 그 변수를 바꾸고 싶으면 본인의 .scss 에 새로운 변수로 덮으면 된다. 나는 기본 link color도 변경하고 싶어서 아래와 같이 바꾸었다.
$link-color:lighten(#000, 20%);
그리고 SASS에서는 공통 스타일 역시 변수처럼 묶어서 import 할 수 있다. 예컨대 이런식으로.
@mixin footer-style{
padding:25px 0;
border-top:1px solid #d9d9d9;
}
.footer-menu {
@include footer-style;
background-color:#fff;
}
.footer{
@include footer-style;
background-color:#595959;
}
@mixin 이라고 앞에 선언한 스타일은 위처럼 css 안에 @include 하여 쓸 수 있다. 공통 스타일을 반복 기술하는 것이 아니라, 마치 java에서 공통 method는 common service로 따로 빼는 것처럼 작성이 가능하다. 그러면 공통 padding 값이 변경되더라도 일일이 찾아 바꾸지 않고 @mixin 한 군데에서만 바꿀 수 있다.
