#330 Better Sass with Bourbon

CSS 속성으로 업체전용 prefix을 타이핑하기가 지겹다고 생각이 될 때, CSS 작업을 보다 편하게 도와주는 여러가지 SASS mixin과 함수들을 포함하고 있는 Bourbon 라이브러리를 살펴볼 필요가 있습니다. 이번 연제에서는 레일스 어플리케이션에서 이 라이브러리를 사용하는 방법에 대해서 알아보겠습니다.

레일스 어플리케이션에 Bourbon 추가하기

아래에 작업하게 될 어플리케이션 화면이 있습니다. 디자인 면에서 좀 더 작업이 필요하다고 판단되어 어플리케이션에 Bourbon을 추가하고 페이지 뷰를 개선하기 위해서 몇가지 기능을 사용할 것입니다.

Bourbon의 설치는 쉽습니다. Gemfile에 추가한 후 bundle 명령을 실행하면 됩니다.

source 'https://rubygems.org'

gem 'rails', '3.2.2'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer'

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'
gem 'bourbon'

Bournbon을 레일스의 asset pipeline과 함께 사용하기 위해서는 기본 application.css 파일이 동작하는 방식을 변경할 필요가 있습니다. 기본적으로 이 파일은 Sprockets 목록(manifest)을 이용해서 다른 스타일시트 asset을 로드하게 될 것이지만, 이 때 문제가 발생할 수 있습니다. 왜냐하면, Sprockets는 SASS 파일을 컴파일해서 각각에 대해서 CSS파일을 생성하게 되는 데, 이러한 과정은 모든 SASS 파일에서 Bourbon mixin을 공유하기가 힘들지기 때문입니다.

application.css 파일을 application.css.scss로 이름을 변경한 후, Sprockets 목록을 제거하고 SASS 명령인 @import를 사용하여 포함하고자하는 파일을 불러올 것입니다. 현재로서는 젬에서 제공하는 bourbon 파일만을 포함할 것입니다.

@import "bourbon";

지금까지의 변경내용을 반영하기 위해서는 레일스 서버를 다시 시작할 필요가 있습니다. 이제 다시 페이지를 로드하면 모든 스타일링이 사라져 버릴 것입니다.

브라우저상에서 /assets/application.css 파일의 소스보기를 하면 아무것도 없다는 것을 알게 될 것입니다. Bourbon은 어플리케이션에 직접 CSS를 추가해 주지 않습니다. 단지 SASS를 통해서 CSS를 보다 편리하게 추가할 수 있게 해 준 뿐입니다. 어플리케이션에 필요한 모든 CSS는 직접 작성해 주어야 하는데, 여기서는 layout과 project 파일을 application.css.scss 파일내에 추가할 것입니다. 이미 이 CSS파일들을 준비해 좋은 상태이지만 이제야 CSS파일내에서 Bourbon을 사용할 수 있게 될 것입니다.

@import "bourbon";
@import "layout";
@import "projects";

이제 페이지를 다시 로드하면 이전의 디자인을 다시 볼 수 있게 될 것입니다.

헤더 변경하기

현재의 디자인 상태에서 가장 먼저 개선할 것은 폰트를 변경하는 것입니다. 현재 페이지는 브라우저의 기본 폰트를 사용하는데, 대개는 Times New Roman체일 것입니다. Bourbon은 font-family add-on을 포함하고 있어서 폰트 타입을 지정할 때 여러가지 변수를 제공해 줍니다. 이것은 사용하게 될 첫번째 폰트가 없을 때 대신사용할 수 있는 폰트까지 포함하고 있습니다. 이 폰트 타입 변수 중에 하나를 사용해서 body의 폰트로 지정해 보겠습니다.

body {
  margin: 0;
  padding: 0;
  background-color: #FFF;
  font-size: 14px;
  font-family: $verdana;
}

다음에는 헤더에 gradient를 추가해 보겠습니다. Bourbon은 linear-gradient 모듈을 제공해 주기 때문에 gradient를 추가하고 색상까지도 지정할 수 있습니다. 밝은 회색에서 아두운 회색으로 점차적으로 변하는 gradient를 추가하겠습니다. 주목할 것은 gradient의 방향을 지정하지 않았다는 것입니다. 이 말은 기본값으로 top을 사용한다는 뜻입니다.

#header {
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  @include linear-gradient(#777, #444);
}

기본 배경색이 linear-gradient에 포함되기 때문에 헤더에서 background-color 속성을 제거했습니다. 또한 헤더 아래에 drop shadow을 추가하려고 할 때 Bourbon에 제공하는 mixin을 사용할 수 있습니다. box-shadow CSS3 속성과 비슷한 방법으로 사용할 수 있지만 mixin이 우리를 대신해서 업체전용 prefix를 생성하게 될 것입니다. offset 값이 없는 검정색 shadow에 3 픽셀의 spread와 함께 6 픽셀 크기의 shadow를 추가해 보겠습니다.

#header {
  background-color: #555;
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  @include linear-gradient(#777, #444);
  @include box-shadow(0 0 6px 3px #000);
}

이제 페이지를 다시 로드하면 변경내용이 반영된 것을 볼 수 있습니다.

각 항목의 모양 변경하기

다음으로 항목 리스트에 변화를 주도록 하겠습니다. 우선, 각 프로젝트를 감싸는 박스에 둥근 모서리를 추가해 보겠습니다. 두말할 필요없이 Bourbon은 border-radius 모듈을 가지고 있어서 이 작업을 쉽게 할 수 있게 해 줍니다. 프로젝트에만 적용되는 스타일은 projects.css.scss 파일내에 두게 됩니다. 따라서, 이 파일에서 변경작업을 하게 되는데 6 픽셀 크기의 radius를 추가해 줍니다.

.project {
  border: solid 1px #AAA;
  margin: 20px 0;
  padding: 7px 12px;
  @include border-radius(6px);
  
  &:hover { background-color: #F8FCCF; }
  
  h2 {
    margin: 0;
    a { text-decoration: none; }
  }
}

다음으로, 각 항목으로 마우스를 이동하게 될 때 해당 항목의 배경색이 변경되는 방식에 변화를 주어 보도록 하겠습니다. 색상이 즉시 변경되지 않고 지정색상으로 fade in이 되도록 하겠습니다. 이 때 transition을 이용하여 이러한 작업을 할 수 있는데, 변경하게 될 속성, 변경소요시간, easing 효과를 넘겨 주게 됩니다.

.project {
  border: solid 1px #AAA;
  margin: 20px 0;
  padding: 7px 12px;
  @include border-radius(6px);
  @include transition(all, 500ms, ease-in-out);
  
  &:hover { background-color: #F8FCCF; }
  
  h2 {
    margin: 0;
    a { text-decoration: none; }
  }
}

이제 특정 프로젝트로 마우스를 이동할 때 500ms에 걸쳐 배경색이 fade in이 되고 마우스가 벗어날 때 동일한 시간에 걸쳐 fade out 될 것입니다.

이 페이지에 마직막으로 주게될 변화는 “New Project” 링크를 개선하는 것입니다. 즉, 링크를 마치 버튼같이 보이게 할 것입니다. Bourbon은 buttons add-on을 포함하고 있어서 이를 이용하면 다양한 형태의 버튼 모양을 만들어 줄 수 있습니다. 이 링크는 new_project 라는 클래스를 가지고 있어서 여기에 스타일을 주어서 링크를 깔금한 모양의 녹색 버튼으로 변경할 것입니다.

.new_project {
  @include button(simple, #3FB344); 
}

이제 페이지를 다시 로드하면 둥근 모서리의 스타일이 적용된 링크를 보게 될 것입니다. (아마도 배경색이 fade되는 것을 전적으로 믿어야만 할 것입니다. 역자주: fade 되는 것이 잘 보이지 않는 모양입니다.)

이 버튼은 밑줄 문자와 같은 anchor 태그의 속성을 상속 받기 때문에 좀 더 크게 보이기를 원합니다. 그래서 몇가지 CSS를 더 추가할 것입니다.

.new_project {
  @include button(simple, #3FB344); 
  text-decoration: none;
  font-size: 16px;
}

이제 새로운 프로젝트를 추가하기 위한 멋진 버튼을 가지게 되었습니다.

Bourbon이 생성하는 CSS의 예

이제 페이지가 더 좋게 보이므로 Bourbon이 만들어 주는 CSS코드를 살펴보겠습니다. 코드 양이 많아서 여기서 모두 보여 줄 수 없지만 헤더에 대해서 생성한 CSS만을 예로서 발췌한 것을 보면 우리가 추가한 gradient에 대한 코드라는 것을 알 수 있습니다.

#header {
  background-color: #555;
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  background-color: #777777;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #444444));
  background-image: -webkit-linear-gradient(top, #777777, #444444);
  background-image: -moz-linear-gradient(top, #777777, #444444);
  background-image: -ms-linear-gradient(top, #777777, #444444);
  background-image: -o-linear-gradient(top, #777777, #444444);
  background-image: linear-gradient(top, #777777, #444444);
  -webkit-box-shadow: 0 0 6px 3px black;
  -moz-box-shadow: 0 0 6px 3px black;
  box-shadow: 0 0 6px 3px black;
}

여기서 보면 많은 양의 코드가 있지만 Bourbon 덕분에 직접 코딩할 필요가 없게 되었습니다.

또한 SASS는 다양한 함수를 포함하고 있어서 variation과 adjustment 값으로 색상을 변경하고자 할 때 CSS코드를 작성하는 것을 도와 줄 수 있습니다. SASS만으로 할 수 있는 것에 대한 더 많은 정보를 268번 연제에서 얻을 수 있습니다.