RailsCasts Pro episodes are now free!

Learn more or hide this

Compass & CSS Sprites

#334 Compass & CSS Sprites

Mar 21, 2012 | 9 minutes | Views, Plugins
Compass improves the Sass experience by providing useful mixins, functions, and more. You will also learn how to make CSS sprites with it in this episode.
Click to Play Video ▶
  • Download:
  • source codeProject Files in Zip (102 KB)
  • mp4Full Size H.264 Video (33.2 MB)
  • m4vSmaller H.264 Video (14.2 MB)
  • webmFull Size VP8 Video (14.2 MB)
  • ogvFull Size Theora Video (36.1 MB)
En Ja Es

Compass는 유용한 mixin과 함수등을 제공해 주어 SASS형태로 스타일시트를 보다 편리하게 생성할 수 있도록 해 줍니다. 특히나 새롭게 선보인 CompassRails 젬을 이용하면 여느 때보다 더 쉽게 Compass를 레일스 asset pipeline과 통합할 수 있습니다. 아래에 있는 웹페이지 화면은 Railscasts 웹사이트 디자인을 단순화하여 보여 줍니다. 이제 시각적효과를 동일하게 유지하면서 이 어플리케이션의 스타일링을 Compass를 이용하여 향상시켜 보도록 하겠습니다.

The page from the Railscasts site.

레일스 어플리케이션에 Compass를 추가하기 위해서는 gemfile의 assets 그룹에 단지 CompassRails 젬만 추가하고 bundle 명령을 실행하면 됩니다.

/Gemfile 
# 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'
  gem 'compass-rails'
end

gem 'jquery-rails'

그리고나서, application.css 파일명을 application.css.scss로 변경해 줍니다. 이렇게 하면 이 파일이 SASS를 인식할 수 있게 되고, Compass를 로드할 수 있는 공간이 생겨 어플리케이션내 SASS 파일들이 Compass를 공유할 수 있게 됩니다. Sprockets는 이러한 기능을 제공해 주지 못하기 때문에 이 파일에서 목록(manifest)부분을 제거할 것입니다. 대신에 SASS를 이용해서 필요한 파일들을 포함할 것입니다. 이제, 어플리케이션에 layout.css.scss 파일을 만들어서 compass 파일과 함께 application.css.scss 파일에 포함시킵니다.

/app/assets/application.css.scss 
@import "compass";
@import "layout";

젬을 어플리케이션에 추가했기 때문에 서버를 다시 시작하도록 합니다. 그리고나서 이 페이지를 다시 로드하면 이전과 똑같이 보이게 됩니다. 한가지 차이라면 이제부터는 Compass를 이용해서 SASS 코드의 기능을 더 좋게 할 수 있다는 것입니다.

어플리케이션에서 Compass 사용하기

어플리케이션에 compass를 추가하면 Compass의 새로운 기능들을 사용할 수 있게 됩니다. Compass를 이용하면 CSS3로 작업을 더 쉽게 할 수 있게 되고 브라우저 종류를 명시할 필요없이 gradient, box shadow, border radius와 같은 CSS 기능을 사용할 수 있게 됩니다. Railscasts 어플리케이션에서는 gradient기능을 사용하는데 이것에 대해서는 images section에 사용법이 잘 기술되어 있습니다. 여기서는 Compass를 이용하여 페이지이동 메뉴바(navigation bar)의 코드를 더 좋게 수정할 것입니다. 이러한 스타일링 작업은 레이아웃 파일에서 처리하게 됩니다.

/app/assets/stylesheets/layout.css.scss 
#nav_bar {
  position: relative;
  padding: 8px 100px;
  margin-bottom: 15px;
  border-top: solid 1px #FFF;
  border-bottom: solid 3px #DE9F00;
  background-color: #333;
  background-image: -webkit-linear-gradient(#5c5c5c, #111111);
  background-image: -moz-linear-gradient(#5c5c5c, #111111);
  background-image: -ms-linear-gradient(#5c5c5c, #111111);
  background-image: linear-gradient(#5c5c5c, #111111);

  .nav {
    float: right;
    padding-top: 2px;
    li {
      padding-left: 25px;
      font-size: 14px;
      color: #BBB;
      a { color: #FFF; }
    }
  }
}

이 파일에서는 gradient를 네 번 정의해서 각기 제조사별 prefix를 사용, 브라우저 종류별 gradient를 정의할 수 있도록 했습니다. 그러나 Compass를 사용하면 이러한 번잡한 작업을 할 필요가 없습니다. 대신에 단 한 줄의 코드만 작성하면 됩니다.

/app/assets/stylesheets/layout.css.scss 
@include background-image(linear-gradient(#5c5c5c, #111111));

이 한줄의 코드가 우리를 대신해서 모든 브라우저용 prefix 코드를 만들어 줄 것입니다. 페이지를 다시 로드할 때 여전히 똑같이 보이지만 생성된 CSS 파일을 보면 Compass가 생성한 모든 gradient 코드를 볼 수 있게 될 것입니다.

/assets/application.css 
/* line 69, ../../app/assets/stylesheets/layout.css.scss */
#nav_bar {
  position: relative;
  padding: 8px 100px;
  margin-bottom: 15px;
  border-top: solid 1px #FFF;
  border-bottom: solid 3px #DE9F00;
  background-color: #333;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #111111));
  background-image: -webkit-linear-gradient(#5c5c5c, #111111);
  background-image: -moz-linear-gradient(#5c5c5c, #111111);
  background-image: -o-linear-gradient(#5c5c5c, #111111);
  background-image: -ms-linear-gradient(#5c5c5c, #111111);
  background-image: linear-gradient(#5c5c5c, #111111);
}

CSS Sprite 사용하기

Compass를 이용해서 우리가 하고자 하는 것이 단지 CSS3에 대한 것이라면 330번 연제에서 보여 준 바와 같이 Bourbon 젬을 대신 사용할 수도 있습니다. 그러나 Compass는 CSS sprite를 포함해서 훨씬 더 많은 기능을 제공해 줍니다. 이 CSS sprite라는 기술은, 여러개의 작은 이미지들은 사이즈가 큰 하나의 이미지로 합친 후 CSS를 이용해서 해당 이미지만을 보여주는 것을 말합니다. 현재 페이지에는 아이콘 줄이 하나 있는데 여러가지 방법으로 Railscasts를 구독할 수 있게 해 줍니다. 각 이미지는 별도의 이미지로 되어 있어 각각에 대해서 별도의 HTTP 요청이 필요하게 됩니다. 하나의 웹페이지로부터의 요청수를 줄이려는 노력은 바람직한 것입니다. 모든 아이콘을 하나의 파일로 합친 후, CSS를 이용하여 각각의 아이콘에 대한 해당 이미지 부분을 나타낼 수 있습니다.

The page from the Railscasts site.

CSS sprite는 손수 작업을 해야 하는 고통이 뒤따르지만, Compass를 사용하면 쉽게할 수 있습니다. 현재 아래의 코드에서는 background-image를 호출하여 아이콘을 처리하도록 되어 있습니다.

/app/assets/stylesheets/layout.css.scss 
#subscribe {
  position: absolute;
  bottom: 10px;
  right: 100px;
  li {
    position: relative;
    margin-left: 8px;
    font-size: 12px;
  }
  a {
    display: block;
    width: 34px;
    height: 34px;
  }
  .itunes   { background-image: image-url("icons/itunes.png"); }
  .twitter  { background-image: image-url("icons/twitter.png"); }
  .facebook { background-image: image-url("icons/facebook.png"); }
  .rss      { background-image: image-url("icons/rss.png"); }
}

Compass의 sprite를 사용하기 위해서는, 우선, 합치고자하는 모든 이미지를 확보한 후 동일한 디렉토리에 두어야 합니다. 여기서는 이미 /app/assets/images/icons 디렉토리에 해당 이미지들이 존재하기 때문에 이런 조치는 필요 없습니다. 이제 @import를 호출하여 경로를 지정해 주면 이미지를 Compass로 로드할 수 있게 됩니다.

/app/assets/stylesheets/layout.css.scss 
@import "icons/*.png";

이렇게 하면 해당 디렉토리에 있는 모든 이미지를 로드해서 하나의 sprite 이미지가 만들어 집니다. 이제 여러가지 방법을 통해서 이 이미지 파일을 이용할 수 있습니다. 좀 더 수작업이 필요한 방법은 각 아이콘에 대한 background-image 호출을 교체하는 것입니다.

/app/assets/stylesheets/layout.css.scss 
.itunes   { @include icons-sprite(itunes); }
.twitter  { @include icons-sprite(twitter); }
.facebook { @include icons-sprite(facebook); }
.rss      { @include icons-sprite(rss) }

이제 웹페이지를 다시 로드할 때 겉으로 보기에는 똑같이 보이지만, 이제 모든 아이콘들은 하나의 이미지로 합쳐져서 단 한번의 요청으로 이 모든 이미지들을 다운로드할 수 있게 됩니다.

The icons combined into a single image by Compass.

Compass는 이 보다도 좀 더 편리한 방법을 제공해 줍니다. sprite를 해당 CSS 클래스로 각각 로드하는 대신에 Compass를 이용하면 이 모든 것을 일괄처리할 수 있습니다. 아이콘을 나타내는 네개의 클래스에 대한 CSS를 제거하고 다음과 같이 대신할 수 있습니다.

/app/assets/stylesheets/layout.css.scss 
@import "icons/*.png";
@include all-icons-sprites;

이것은 각 이미지에 대한 별도의 CSS 클래스를 자동으로 만들어 줍니다. 이제 HTML을 수정하여 해당 클래스를 참조하기만 하면 됩니다. 각각의 아이콘은 다음과 같이 하나의 리스트 상에 나타날 것입니다.

/app/views/layouts/application.html.erb 
<ul id="subscribe" class="horizontal">
  <li><a class="itunes" href="/itunes"></a></li>
  <li><a class="twitter" href="/twitter"></a></li>
  <li><a class="facebook" href="/facebook"></a></li>
  <li><a class="rss" href="/rss"></a></li>
</ul>

자 이제, 여기서는 icons가 해당되겠지만, 디렉토리명과 `-`을 각 클래스명 앞에 붙여 주기만 하면 됩니다.

/app/views/layouts/application.html.erb 
<ul id="subscribe" class="horizontal">
  <li><a class="icons-itunes" href="/itunes"></a></li>
  <li><a class="icons-twitter" href="/twitter"></a></li>
  <li><a class="icons-facebook" href="/facebook"></a></li>
  <li><a class="icons-rss" href="/rss"></a></li>
</ul>

웹페이지는 똑같이 보일지 몰라도 생성성 CSS는 이제 하나의 이미지를 참조하게 되고 background-position을 이용하여 각 아이콘에 대한 해당 부분만을 보여 줄 수 있게 됩니다.

/assets/application.css 
/* line 66, icons/*.png */
.icons-sprite, .icons-facebook, .icons-itunes, .icons-rss, .icons-twitter {
  background: url(/assets/icons-s1286bd1660.png) no-repeat;
}

/* line 60, ../../../.rvm/gems/ruby-1.9.3-p125/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-facebook {
  background-position: 0 -102px;
}

“Spriting With Compass” tutorial에 보면 sprite에 대한 더 많은 정보를 볼 수 있습니다.

간단한 수평 리스트

Compass의 모든 문서는 훌륭하기 때문에, Compass가 제공하는 기타 다른 기능을 알아보기 위해, 시간을 할애해서 Reference와 Help 섹션을 찬찬히 살펴 볼만한 가치가 있습니다. 여기에는 유용한 유틸리티 함수들이 많이 있는데 이 중에 하나는 수평 리스트를 훨씬 쉽게 만들어 줍니다. 종종 리스트를 이용하여 페이지이동 메뉴바(navigation bar)를 만들게 되는데, 이 때 간단하게 horizontal-list mixin을 사용하면 편리합니다. Railscasts 사이트는 이러한 기능을 위해 .horizontal CSS 클래스를 작성해 두었으며 다음과 같은 SASS 코드를 가지고 있습니다:

/app/assets/stylesheets/layout.css.scss 
ul.horizontal {  
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
    float: left;
  }
}

이 때 해당 mixin을 호출하여 이를 대신할 수 있습니다.

/app/assets/stylesheets/layout.css.scss 
ul.horizontal {
        @include horizontal-list;
}

비록 각각에 대해서 margin이나 padding과 같은 약간의 작업이 필요할 수 있지만, 페이지의 모든 수평 리스트는 이제 동일하게 (수평으로) 보이게 됩니다.

Compass Reset

Compass Reset은 또 다른 유용한 기능입니다. 일반적으로 브라우저는 각각, DOM의 각 엘리먼트에 대한 크기와 공간에 대해 상이한 값을 가지고 있습니다. Compass Reset은 이 모든 엘리먼트에 대한 값을 0으로 설정해서 각기 다른 브라우저에 대해서 CSS 스타일을 작성해서 일관성있게 보이도록 할 수 있게 해 줍니다. 방법은 application.css.scss 파일에 이것을 포함하기만 하면 되는 것입니다.

/app/assets/stylesheets/application.css.scss 
@import "compass";
@import "compass/reset";
@import "layout";

이것은 몇 안되는 compass 명령 중의 하나이며 해당 CSS를 레이아웃으로 삽입해 주기 때문에 사용시에 이에 대해서 알고 있어야 합니다. Compass Reset을 적용하면 h1 엘리먼트내에 있는 “Welcome” 문구는 훨씬 작게 보이게 됩니다.

The text in the h1 element has had its styling changed by Compass Reset.

대부분의 웹디자인은 각 브라우저마다의 기본 스타일에 어느 정도 영향을 받기 때문에, Reset CSS를 적용하게 되면 대부분의 웹사이트들은 덜 이쁘게 보일 것입니다. 그러나 이 상태에서 브라우저에 무관하게 일관성있는 스타일을 작성할 수 있습니다. 예를 들면, 이제 h1 엘리먼트의 스타일을 별도로 선언할 수 있습니다.

/app/assets/stylesheets/layout.css.scss 
h1 {
        font-size: 28px;
        font-weight: bold;
        margin: 18px 0;
}

이제 웹페이지는 다시 이전과 같이 보이게 됩니다.

CSS Reset이 모든 경우에 좋을 수는 없지만, 브라우저간의 호환성을 유지하여 디자인하는 것이 중요한 경우에는 사용할만한 가치가 있습니다. Compass Reset의 또 다른 방법으로는 normalize.css를 보기 바랍니다. 이것은 우리가 직접 처음부터 모든 엘리먼트의 값을 설정할 필요가 없이 해당 브라우저의 기본값에 더 근접한 값으로 디폴트값을 설정해 줍니다.

더 읽어야 할 것들

이 연제는 여기까지입니다. 여기서 언급하지 않은 많은 기능들이 있기 때문에, 더 많은 정보를 원한다면 해당 웹사이트를 보기 바랍니다. 우리가 언급하지 않았던 내용 중의 하나로 blueprint 모듈이 있습니다. 이것은 완전한 기능을 갖춘 CSS 프레임워크로서 격자(grid)에 근거한 디자인을 할 수 있도록 해 줍니다. 또한, Compass를 함께 통합하는 다른 방법으로 CompassRails의 README 파일을 읽어 볼만 합니다. 레일스의 이전 버전으로 작업시 CompassRails를 사용할 수 있는 약간의 유용한 정보들도 있으므로 참고하기 바랍니다.

Compass는 규모가 큰 프레임워크이지만 원하는 모듈별로 사용할 수 있어 유연성을 가지고 있습니다. 이 말은 어플리케이션에서 필요로하는 부분만을 포함해서 사용할 수 있다는 말이기도 합니다.