1. Beautifying your Sencha
App using scss
- By Neha Upadhyay

2. Topics to be covered
•
•
•
•
•
•
What is scss
Environment setup for compass
How to use compass in sencha app
Scss mixins in sencha
Css variables in sencha
Theming in sencha.

3. What is scss
• Scss is a nested css metalanguage that
supports variable, mixins, nesting and
selector in heritance.
• Every valid css is a valid scss.
• A scss file has .scss extension.
• A scss file has to be compiled using
compass which will generate/update the
repective css file.

4. Environment setup for
Compass
1. Install compass using ruby gem installer.
You will have to download the installer
from http://rubyinstaller.org/ for windows
Mac machines don’t need to install it.
2. After finishing the setup please check if
your environment variable are set if not
then please set your path to Ruby193bin
3. Open your command window and type
gem command.
4. Say gem install compass to install compass

5. How to use compass in
sencha app
• If sencha application is created using
sencha sdk tools i.e using generate app
command in command window then
there is a sass project in resources/scss
directory.
• NOTE: Compass commands can be
executed only in a valid sass project
directory.

6. Continued
• The directory already contains a scss file
name app.scss.
• It includes all the scss files which provide
the default blue theme for sencha
application.
• It looks like this

8. Continued
• You can create your own .scss file in the
same scss directory and when you compile
that file using compass the corresponding
css file will be generated/updated in the
resources/css
• And you just have to include this css file in
your index.html.

9. How to compile a scss file?
• To compile the scss file you have to go to that
path in your command window.
• Check if your compass command is working.
• Then execute compass compile command
• This command will compile all scss files in
that directory.
• You can also execute compass watch commad
it compiles your scss file as you change it.

10. SCSS Mixins in sencha
• In scss mixins allow you to re-use whole
chunks of CSS, properties or selectors. You
can even give them arguments.
• Eg: Here $name is a variable
@mixin pictos-iconmask($name) {
.x-tab .x-button-icon.#{$name},
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image:
theme_image('default', "pictos/" + $name + ".png");
}
}

11. Continued
• Sencha provides such mixins for every
component using which we can create new
ui themes.
• All these mixins are listed in
documentation of sencha.
• They look like this:

13. Why use scss mixin ?
One may ask why use mixin provided by
sencha to style components. It can also be
done by normal css. The answere is:
• While using mixin we just have to pass
some color or gradient name and sencha
does the css itself. Hence the
styles, gradients created work for android
as well as iOS.

14. Continued…
• While writing the css for sencha
components one has to override many
sencha styles and sometimes its very
difficult to trace which classes or css
properties have to be overrided.
• For every mixin name can be used to apply
some specific css propeties and also for
selector inheritance which makes it very
easy to overide sencha classes.

15. Continued…
Css for button
Scss for button
.loginButton{
webkit-border-radius:
0.2em!important;
border-radius: 0.2em!important;
height:2.7em;
background-image: -webkitgradient(linear, 50% 0%, 50%
100%, colorstop(0%, white), colorstop(2%, #FDFDFD), colorstop(100%, #D9D9D9))!import
ant;
}
@include sencha-buttonui('loginButton', #2D7AB4, 'glos
sy');

16. Css variables in sencha
• Like mixin sencha also provides css vars or
variable for styling in sencha.
• Every component has its own set of css
variable which can be used to change the
style of that component.
• Css variables in sencha are used for
theming of the sencha application as these
variable are global.

17. Theming in sencha
• I still have to learn it.