Tutorial SASS para cambiar CSS de

Sencha-touch
En este tutorial se vera de forma sencilla como realizar cambios en el CSS de
Sencha touch tales como cambiar iconos o colores de la aplicacin. A
continuacin los requisitos para poder realizar dichos cambios.
1.- Instalar Ruby
Primeramente tenemos que instalar Ruby, la liga para descargarlos es
http://rubyinstaller.org/
2.- Instalar Compass
Una vez que tenemos instalado ruby vamos al command prompt para ingresar
el comando para instalar Compass el cual es:
gem install compass

Automaticamente se descargaran los paquetes para instalar Compass.

3.-Cambiar tema de Sencha
Ahora ya que se tiene todo instalado procedemos a crear una carpeta con el
nombre styles, sobre la misma carpeta donde esta las libreras de sencha
touch, llamada touch, como se ve en el la imagen.

Ya creada la carpeta ingresamos a ella y se crearan dos archivos, uno de

configuracin SASS y otro donde se agregaran los cambios de Sencha, tal como
se ve en la imagen.

Dentro del archivo de configuracin se especifica donde se agregara el CSS que

se genera a partir de compilar el SCSS, de igual manera se agrega donde se

encuentra el framework de Sencha, en este caso est dentro de la carpeta

touch, este archivo se llama config.rb, el cdigo es el siguiente:
# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)
# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")
# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")
# Load the sencha-touch framework
load File.join(sass_path, '..', 'touch', 'resources', 'themes')
# Specify the output style/environment
output_style = :compressed
environment = :production

Ya que tenemos el archivo de configuracin pasamos al archivo donde

agregaremos los cambios al CSS de Sencha este archivo se llama senchatouch.js, esto se ve en el cdigo siguiente:

@import 'sencha-touch/default/all';
//Iconos agregados
@include pictos-iconmask('refresh5');
@include pictos-iconmask('notificaciones');
@include pictos-iconmask('precios');
@include pictos-iconmask('pedidos');
@include pictos-iconmask('cartera');
@include pictos-iconmask('resumen');
@include pictos-iconmask('facturas');
//Componentes de Sencha
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;

Como observamos se incluyen todos los componentes de Sencha, y se agregan

los iconos, esto se logra agregando nuestros propios iconos de tipo PNG en la
carpeta donde se alojan los inconos de default, dichos iconos se encutran
dentro
de
la
carpeta
touch
y
con
la
ruta:
touch\resources\themes\images\default\pictos,
dentro
de
esta
carpeta
copiamos los iconos y en el archivo que estamos viendo los agregamos con el
include, dichos iconos se ven como en la imagen.

Una vez que tenemos ya agregados los componentes y los cambios que
realicemos, ahora pasamos a compilarlos.
4.- Compilar archivos
Primero se crea una carpeta llamada CSS para dentro de la carpeta styles,
donde ah se guardara el archivo a generar.
Ahora abrimos el Start Command Prompt

Ahora que estamos dentro del Command Prompt nos ubicamos en la carpeta
donde tenermos los archivos que creamos para la configuracin.

Ya situados en dicha ubicacin ingresamos

archivos y generar el CSS de sencha-touch.

compass compile

para compilar los