touch/resources/themes/templates/project 폴더 안에 보면 sencha-touch.scss 파일을 확인할 수 있는데, 이 파일의 내용이 기본이 되어야 한다.
styles 폴더에 새로운 테마파일을 만들고 이 내용을 복사해 넣자. (동영상의 경우 default-theme.scss)
Compiling the theme
이제 command line을 통해 styles 디렉토리로 갖서 compass compile 을 실행해 보자.
만약 compass가 설치되어 있지 않다면, compass : command not found 라는 응답이 올 것이다. ** 맥을 사용한다면 http://compass-style.org/install/ 페이지를 참고해 설치할 수 있다. ** gem update –system, gem install compass 명령을 통해 설치할 수 있다. 권한이 필요하면 sudo로 install 하면 된다.
그러면 상위 디렉토리에 xxx-theme.css 파일이 생성되는 걸 확인할 수 있다. (동영상의 경우 default-theme.css)
compass watch 명령을 내려 놓으면, compass가 백그라운드에서 scss 파일의 변경을 감시한다. 이때 변경이 감지되면, 해당 내용이 css에 실시간으로 반영된다. (매우 편리해 보인다.)
Writing vanilla CSS
이제 구체적으로 테마를 변경해 보자.
먼저 scss 파일을 만들어야 한다. 이 파일은 일반 css 파일처럼 수정하면 된다.
트위터 타임라인 페이지에 일반 css를 적용해보자. (미리 twitter 타임라인 페이지를 만들어 놓은 것인데, 해당 클래스가 없어서 동영상에서는 이 내용이 공백으로 나오고 있다. 여기에 twitter 에서 제공하는 css를 몇줄 추가한 다음 scss를 컴파일해서 돌려보는 것이다.)
twitter 에서 사용하는 css는 보다 가시성을 좋게 하려면 scss의 nesting 문법을 이용해 태그를 정리할 수 있다.
Adding Icons
센차에서는 300여개의 아이콘을 제공한다.
touch/resouces/themes/images/default/pictos 밑에 이 300여개의 png 파일들을 확인할 수 있다. 어떤 테마를 만들든, 이 아이콘들을 사용할 수 있다.
예제에서는 20여개의 아이콘이 있는 툴바를 볼 수 있다. (github 예제) 이 아이콘들은 센차에 기본으로 내장된 아이콘들이다. (나중에 나오겠지만, 최종 배포시에는 기본 아이콘들을 제거하고 필요한 아이콘을 기술해 주는 것이 css 파일 사이즈를 줄일 수 있는 매우 유용한 방법이다)
pictos 에 있는 다른 아이콘을 이용하고 싶다면, @include pictos-iconmask(‘twitter2′); 와 같은 코드를 scss에 추가해 주어야 한다.
compass는 해당 아이콘을 css에 추가하고, 이미지 파일을 base64로 인코딩하여 css에 텍스트값으로 넣어준다. (이렇게 하면, 이미지 파일을 별도로 추가할 필요가 없어 간편하다.)
Changing SASS variables
센차터치는 SASS 변수를 아주 잘 활용하고 있다.
기본 테마에서 base-color를 darkblue로 사용하고 있고, active-color는 lightblue 색을 사용하고 있다. 이 값을 수정하고 싶다면 theme scss 파일에 $base-color 값과 $active-color 값을 각각 원하는 값으로 설정해 주면 된다.
$base-gradient : ‘matte’ 가 기본인데, ‘glossy’나 다른 값을 줄 수 있다.
loadmask 를 검색한 다음 문서에서 CSS Variables 를 확인해보면, 어떤 CSS 변수를 사용하는지 알 수 있다. 이 변수 값을 바꿔주면 해당 값이 적용된다. Ext.LoadMask 클래스의 경우 $loading-spinner-color 값을 지정해 주면, 스피너의 컬러값이 반영된다.
Compressing the CSS
개발하는 동안에는 compass를 통해 만들어진 css가 가독성이 있는 것이 좋다. 하지만, 배포시에는 이 css를 최대한 짧게 압축해서 배포하는 것이 좋다.
compass 를 통해 압축하려면 config.rb 파일에서 output-style 값을 compressed 로 설정하고, environment 값을 production으로 설정한 다음 compile 하면 된다.
또한, 사용하지 않는 컴포넌트를 빼고 배포하고 싶다면, scss의 @include 를 제거(혹은 주석처리)한 다음 compile 해주면 된다. css 파일의 사이즈가 더 줄어든다.
default 아이콘 설정을 사용하지 않도록 설정한 다음 필요한 아이콘만 기술해서 넣어주는 것도 파일 사이즈를 줄일 수 있는 한 방법이다.