CodeKit에서의 SCSS 설정과 Image Sprite

작업 디렉토리

작업환경 디렉토리 구조는 아래와 같이 SCSS폴더와 실 작업 폴더를 분리.

WorkingDir/
    _SCSS/
        contents/
            _style/
                style.scss
    public_html/
        contents/
            _style/
                style.css

폴더명 앞 '_'는 맥 시스템 특성상 파일과 폴더명을 구분하지 않고 정렬하기 때문에 폴더를 상위로 정렬하기 위한 조치

CodeKit에서 컴파스 설치

설정 > FRAMEWORKS > Compass

  • Sass: _SCSS
  • CSS: public_html
  • 그 외 기본세팅 후 Install Compass

설치 이후 작업폴더 루트에 config.rb 파일 생성되고
'_SCSS'와 'public_html' 폴더 .scss 파일 위치 동기화되어 컴파일 됨.

Image Sprite 생성을 위한 세팅

WorkingDir/
    _SCSS/
        contents/
            _images/
                icon/
                    add.png
                    modify.png
                    del.png
                    list.png
            _style/
                style.scss
    public_html/
        contents/
            _images/
                icon.png
            _style/
                style.css

sprite 이미지 생성도 위와 같이 scss 컴파일 방식과 같게 하기 위해서는 config.rb에 옵션을 추가

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public_html"
sass_dir = "_SCSS"

# 이미지 생성 경로 지정
images_dir = "_SCSS"
generated_images_dir = "public_html"

# 상대경로 지정
relative_assets = true

javascripts_dir = "scripts"
fonts_dir = "fonts"

output_style = :nested

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

line_comments = false
color_output = false

preferred_syntax = :scss

수정 후 style.scss에 아래와 같이 입력.

    @import "compass/utilities/sprites";
    @import "/contents/_images/icon/*.png";

    @include all-icon-sprites;

파일명 정의시..

all-icon-sprites에서 icon이 파일명이자 _SCSS 폴더 내에 존재하는 sprite폴더명이다. 처음엔 잠시 헷갈리기도 했었음.. ㅡㅡ;
파일명을 my-board.png라고 생성하고 싶다면..

    @import "compass/utilities/sprites";
    @import "/contents/_images/my-board/*.png";

    @include all-my-board-sprites;
  

위와 같은 형태로 해야 함.
sprite 생성시 옵션변경할때나 비슷한 패턴으로 들어감.

ex)

  • $my-board-spacing: 10px; // sprite 아이콘 간격을 조정
  • $my-board-sprite-dimensions: true; // css생성시 width, height 추가

이렇게 해서 생성하면 sprite이미지가 생성은 되나 파일명에 해시값이 붙게 됨.

아래 소스를 추가하면 해시값이 'icon.png?v=30fkg035' 형태로 추가되어
sprite 이미지가 변경되었을때 해시값이 바뀌어 캐시로 인해 제대로 출력이 안되는 문제를 미연에 방지할 수 있게 됨.

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
    # Note: Compass outputs both with and without random hash images.
    # To not keep the one with hash, add: (Thanks to RaphaelDDL for this)
    FileUtils.rm_rf(filename)
  end
end

# Replace in stylesheets generated references to sprites
# by their counterparts without the hash uniqueness.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{(?<start>-s)(?<hash>[a-z0-9]{10})(?<file>\.png)}, '.png?v=\k<hash>')
    end
  end
end

JavaScript 생성 위치 지정

일반적으로 코딩 작업 환경으로는 js를 작성할 일은 없으나
간혹 css만으로 처리할 수 없을 때가 있으므로 확인해 보았다.

WorkingDir/
    _SCSS/
        contents/
            _images/
                icon/
                    add.png
                    modify.png
                    del.png
                    list.png
            _js/
                script.js
            _style/
                style.scss
    public_html/
        contents/
            _images/
                icon.png
            _js/
                script.min.js
            _style/
                style.css

js 파일도 역시 위와 같은 형태로 생성할 경우 CodeKit에서 아래와 같이 설정해주면 된다.

설정 > LANGUAGES > JavaScript

  • JavaScript file output paths:
    • By replacing this segment of the input path: Checked
    • _SCSS
    • With this one: public_html
  • Name The Output File:
    • *.min.js

출처 :