티스토리 뷰

웹프로그래밍/js

[Sencha Touch] Theme 생성을 위한 Ruby, SASS, Compass

공허공자 2012. 3. 8. 12:14

공식 사이트에서 제공하는 서론을 보면
*.sass파일 Compass 컴파일, Ruby, RubyGems 가 등장한다.

SASS와 Compass는
CSS3 에서 변수도 사용하고... 프로그래밍을 가능하게 해주는 것으로 보인다.
컴파일 하여 스타일시트 결과물을 얻는 CSS3의 사촌간이라고 판단하고 넘어간다.
해외 사이트에서 튜토리얼을 발견했다.  문법도 있고 제법 골때려주신다.

Sencha Touch 테마를 다루기 위해서는 준비물이 필요한 것이군...
Ruby, RubyGems, Compass를 설치해야 한다.

개발환경: Windows 에서의 설치법을 다룬다.

Ruby의 홈은 이곳인데 다운로드받으러 이동한다.
환경이 Windows인 관계로 해당 섹션을 찾아 스크롤을 내린 뒤

중에서 원클릭 인스톨러와 1.8.7 바이너리를 받는다.
(1.9.1 최신버젼 쓰려 하니 Compass 설치시 dll 이 빠졌다고도 나오고 나중에 귀찮다.)

원클릭 인스톨러를 통해 Ruby 기본팩을 설치한 뒤
기본팩이 설치된 디렉토리에 1.8.7 바이너리를 압축풀며 덮어씌운다.
(기본 디렉토리인 C:\Ruby 에 설치했다.)

그냥 바이너리만 받고 윈도우 환경 설정에 PATH 설정하는 방법도 된다.
이 방법은 1.8.7 바이너리만 다운받고 C:\Ruby 디렉토리 등에 압축 해제 후
윈도우 환경설정을 띄운 뒤 PATh에 ;C:\Ruby\bin 를 추가한다.

위의 방법 둘 다 앞으로의 설치를 위한 PATH 셋팅을 위해 재부팅한다.
이로써 Ruby 설치는 완료했다.

RubyGems는 RubyGems포지에서 다운받으면 된다.
* 윈도우용 직접 링크: v1.8.17

RubyGems는 Ruby 명령으로 설치해야 한다.
RubyGems 압축을 적당한 디렉토리에 풀어준다.
단축키 Win + R > 'cmd' 타이핑 > 엔터를 통해 명령창을 띄운다.
명령창에서  RubyGems 압축 해제한 디렉토리로 이동 후
C:\Ruby\bin\ruby setup.rb 명령을 입력하여 설치한다.
이로써 RubyGems 설치를 완료했다.

Compass의 설치도 명령창에서 다음의 명령을 입력한다.
C:\Ruby\bin> C:\Ruby\bin\gem install compass
Fetching: ...
...
4 gems installed
Installing ri ...
...
C:\Ruby\bin>
이로써 Compass 설치도 끝났다.

이후는 Sencha Touch 테마 컴파일 작업을 하면 되겠다.

테마이름을  application 이라 했을 때
config.rb와 application.sass 있는 디렉토리에서
명령창에서
> compass compile
명령을 내리면 ../css/application.css 가 생성된다.

생성된 css를 index.htm 등의 <head> 안에 css 링크로 걸어주면 테마가 적용된다.


저작자표시

'웹프로그래밍 > js' 카테고리의 다른 글

jQuery.text() 하면 newline 날아가는것 방지  (0) 2012.04.06
IE 8 이하에서 window.opener null undefined 오류시  (0) 2012.03.13
텍스트 비교 구현 관련  (0) 2012.03.06
jQuery 에서 ExtJS 로  (0) 2012.02.29
IE: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)  (5) 2012.01.17
공유하기 링크
댓글