The following learning pathway will help you style and theme your Sencha applications using Sass and Compass.
- (Download) Download Sass — sass-lang.com
-
(Guide) Theming Sencha Touch — docs.sencha.com
Customizing the interface of your Sencha Touch mobile app using CSS 3 and Sass/SCSS. -
(Slides) Theming Sencha Touch — David Kaneda on November 29, 2010
Sencha Touch features a novel theming system built on top of Sass & Compass. This session will show you how to quickly customize the look and feel of your application, extend core styles, and optimize your stylesheets to download faster. Lot of code samples and walkthroughs included. -
(Video) Theming Sencha Touch (9:36) — Drew Neil on February 16, 2012
Drew Neil (@nelstrom) describes how to theme Sencha Touch. This tutorial is perfect for beginners who want to get started customizing the interface of their Sencha Touch mobile app using CSS 3 and Sass/SCSS. -
(Guide) Theming Ext JS — docs.sencha.com
Ext JS 4 has a brand new theming system to customize the look of your application while still supporting all browsers. -
(Video) Theming Ext JS 4 (34:52) — Robert Dougan on January 25, 2011
Ext JS 4 has a new CSS architecture which uses Sass & Compass. This will enable developers to easily create new themes. During this session you will learn how the Ext JS 4 theme was constructed, how to quickly customize the look and feel of your application and how to optimize your stylesheets for faster downloads. -
(Video) Building Sencha Themes (43:20) — Rob Dougan, David Kaneda on December 7, 2011
Learn how to use the power of CSS3, Sass, Compass, and Sencha tools to create consistent and cross-platform themes for Ext JS 4 and Sencha Touch. -
(Video) Theming Sencha Frameworks with Sass and Compass (1:22:02) — James Pearce on July 16, 2011
James Pearce takes you through setting up Sass and Compass to start theming Sencha Touch and Ext JS 4. -
(Video) Sass - The Next Wave in Styling and Theming (45:34) — Chris Eppstein on December 22, 2010
CSS and CSS3 are an amazing toolbox for styling your applications, but they're a challenge to wrangle due to their wordy and encyclopedic nature. Sass is an overlay language for CSS that allows powerful and thorough control of CSS properties with a minimum of typing. In this session, we'll give you a thorough grounder in Sass. -
(Community) The Absolute Beginner's Guide to Sass — Andrew Chalkley (blog.teamtreehouse.com) on January 16, 2013
What is Sass? Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. It's a way to simplify your CSS workflow, making development and maintenance tasks easier. -
(Community) Getting started with Sass and Compass — Adam Stacoviak (thesassway.com) on June 29, 2011
So your friend, co-worker, web-buddy or whomever told you about Sass, Compass ... or both. Great! Now what? In this beginner guide we take you through the first steps of getting started with Sass and Compass. We walk you through installation, creating a test project, compiling your first lines of Sass to CSS, and we even "mixin" a little Sass history. -
(Community) Theming Sencha Touch with SASS — Patrick Hamann (www.uvd.co.uk) on August 28, 2012
At the last London Sencha Touch user group I gave a talk on theming Sencha Touch (ST) with SASS. We've since had many requests for the slides and therefore thought I'd write the process up in a blog post. -
(Blog) CSS3 Styling in Every Browser — Robert Dougan on July 07, 2011
Traditionally, cross-browser styling has been a time consuming and tedious task. With the rise of modern browsers and the introduction of CSS3, we can finally create beautiful cross-browser interfaces using a simple syntax. We show you how with the new Sencha SDK Tools. -
(Video) Kicking Ass + Taking Names with Sass & Compass (16:29) — Nathan Henderson
A quick introduction to Sass - a powerful extension to CSS3, and Compass - a CSS authoring framework.See how using Sass & Compass can help to simplify your workflow, make changes & revisions easier, and impress your colleagues with newfound stylesheet wizardry.
-
(Community) The Ecstasy and Agony of Compass Sprite Generation, Part 1 — Tracy Rotton (blog.teamtreehouse.com) on December 21, 2012
CSS preprocessors have become increasingly popular in recent years because of their capacity to do a lot of the most tedious parts of CSS for you automatically. -
(Community) The Ecstasy and Agony of Compass Sprite Generation, Part 2 — Tracy Rotton (blog.teamtreehouse.com) on January 9, 2013
In the first part of our tutorial on Compass sprites, I showed you how awesome it was that we could make Compass do all the hard work for us by simply throwing our icons into their own folder and telling Compass what we wanted to do. If it were only that easy all the time.
-
(App) Sass — sass-lang.com
Sass is an extension of CSS that adds nested rules, variables, mixin functions, and a whole lot more. It eases the burden of organizing and maintaining CSS code, while also compiling your Sass code to properly formatted CSS. -
(App) Compass — compass-style.org
Compass is an open-source CSS framework that makes using CSS3 and popular design patterns easier than ever. Compass works exclusively with Sass to help you write cleaner, quicker CSS code. -
(App) Compass.app — compass.handlino.com
Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily eithout resorting to command line interface. -
(App) Scout — mhs.github.com
Scout runs Sass and Compass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. You’ll never have to worry about your Ruby setup or deal with technical issues. Scout does all of the heavy lifting, giving you more time to do what you love. -
(App) CodeKit (Mac only) — incident57.com
CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript, Jade & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. -
(App) Hammer (Mac only) — hammerformac.com
Hammer is a web development tool for web designers & developers. Hammer knows all about CoffeeScript, SASS & SCSS - and automatically compiles them into JavaScript & CSS. You can also use special tags to reference them in the <head>. -
(Book) Sass and Compass in Action (Manning Press) — Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis on January 2013
Sass and Compass in Action is the definitive guide to stylesheet authoring using these two revolutionary tools. Written for both designers and developers, this book demonstrates the power of both Sass and Compass through a series of examples that address common pain points associated with traditional stylesheet authoring. The book begins with simple topics such as CSS resets and moves on to more involved topics such as grid frameworks and CSS3 vendor implementation differences. -
(Book) Pragmatic Guide to Sass (The Pragmatic Programmers) — Hampton Catlin, Michael Lintorn Catlin on December 2011
Written by Sass creator Hampton Catlin and Michael Lintorn Catlin, Pragmatic Guide to Sass shows you how to you to improve your CSS, from the basics to advanced topics, from first installation to sprucing up your buttons. You'll see how to code the right way in Sass thanks to short, clear examples. Two-page spreads show the explanation on one side and code examples on the other. You'll learn how to improve your pages in minutes."