Themeing Sencha Touch with SASS blog post

button.css

.x-button.x-button-astonvilla {
    background-image: none;
    background-color: #650032;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #B20058), color-stop(50%, #7F003F), color-stop(51%, #650032), color-stop(100%, #4C0025));
    background-image: -webkit-linear-gradient(top, #B20058, #7F003F 50%, #650032 51%, #4C0025);
    background-image: linear-gradient(top, #B20058, #7F003F 50%, #650032 51%, #4C0025);
}

button.js

{
    xtype: 'button',
    text: 'Arsenal red button',
    ui: 'arsenal'
}

config.rb

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework
load File.join(dir, '..', 'resources', 'themes')

# Look for any *.scss files in same directory as this file
# Place compiled *.css files in the parent directory
sass_path    = dir
css_path     = File.join(dir, '..', 'css')
output_style = :compact
environment  = :production

icon.scss

//This mixin
@include pictos-iconmask('arsenal');

//Will output this css
.x-tab .x-button-icon.arsenal,
.x-button .x-button-icon.x-icon-mask.arsenal { 
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6
  /NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAA
  AAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ld
  GEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY
  2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm
  9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6e
  G1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94Y
  XAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZ
  iMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJR
  D0ieG1wLmlpZDpEOTIxQjU3REMzNUYxMUUxOTA4M0Q0MUJGMzlBNTVENSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRp
  ZDpEOTIxQjU3RUMzNUYxMUUxOTA4M0Q0MUJGMzlBNTVENSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5
  jZUlEPSJ4bXAuaWlkOkQ5MjFCNTdCQzM1RjExRTE5MDgzRDQxQkYzOUE1NUQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bX
  AuZGlkOkQ5MjFCNTdDQzM1RjExRTE5MDgzRDQxQkYzOUE1NUQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+
  IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qEhIbwAAAzlJREFUeNrsmUtsTFEYgGeqtESJqCCaJlrEMxKJhJ
  VqYkdCxUo8dlgIsRILtDSSxkJUJJZEkSBeJSE0Hi3xWhC08ahGiEfapBK0tDW+v85Mrps7M3euO4/M/H/yzZnOnHvnfPe8T
  4OhUCiQS5EXyLFQYRVWYRVWYRVWYRVWYRVWYRVWYafIl5dgMOjrTTsLyuRBLoUqWACTYRj0wVt4AdfhQvHP9vepkpW9f3DwJ
  YowBR8tzyPB+1bAfih3kfc3NMIeeJ1s4bG9b7odhREtITkOi7KoNfcjPDTfoVZHkNyAaVnWfTsjfdiILiGphPlZKCvx+R9hYjW
  sy+IB+nmuTUsP7TXcBrdgPEzPhkEKvodnJLg4OAXbR2n6ssyZr2BIhgtdCddalLjNHN/kah5GuppkZwbLfpTBFaEPvi08kF5MM
  tf8WWgImGYyB9akQbQDTsIBZL/4vtKKsXTcTHIwRZJH4aaAZMf/Li3zPV5bkqoqRXK975sHD1HgYxkG4DHcMTU50jRbi
  a9J2S2lOETwUbiZQjO1+M3SXSoteX9kinBrgvm74IhMFdBiFYzTXdoyRbjYZb5fUA97kex2ec1Cy/tnaRemyckgUuMi
  2nYjmh7AveWQ4IVlo+a0iZsClMHW+JkfQDbEG3xUJ4NZmkr0QPX0iKM7FSSUzAv1jQHa6EB2ZCHljOFpNby0THu4/ugl
  eeiIMtI7seRDZijoFKPsuPM4r7I0vfrkjFF5MUoRBHUm4KMiZLtnNlhhaOWazYmKDub5B7MsHxck0jfTyScdkuyqJCBa
  RdMdLhGppQGOEyhnpJf+txdKLPkOQs7+P5lnDFhK+yG4Zav5AFXce2A37KRtXRXYbn8oBzYLYeVDtNOr9mOnZCUwvTYCl
  9KctW2jw6ZB9EMT8yZUp9ZSUm+TbaHFN7yrUpG37ULV5lasUa3kTgPjXEWCyI9iuSQx12UbNb3QXUyatZxt0SB5Xx4kpk
  KLkvt8OP9HgagCtNM3RzxitwZI9oaSHLYhYNeRtgY4jPNIkLEZ8GEwN+D93fmpEKOgi/xm59StYiPCOdS6H8PVViFVViF
  VViFVViFVViFVViFVTgXhf8IMABxESY3EfkbXQAAAABJRU5ErkJggg=='); }

theme.scss

$base-color: #AF0000;
$active-color: #FFF;
$page-bg-color: #fff;
$base-gradient: 'glossy';

@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;

variables.scss

$base-color: #1985D0 !default;
$active-color: darken(saturate($base-color, 55%), 10%) !default;
$neutral-color: #e0e0e0;
$base-gradient: 'glossy'!default;
$font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !default;
$page-bg-color: #eee !default;
$alert-color: red !default;
$confirm-color: #92cf00 !default;
$global-row-height: 2.6em !default;