Beautifying your SenchaApp using scss

- By Neha Upadhyay

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.

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.

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 Ruby193\bin

3. Open your command window and type gem command.

4. Say gem install compass to install compass

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/scssdirectory.

• NOTE: Compass commands can be executed only in a valid sass project directory.

Continued

• The directory already contains a scss file name app.scss.

• It includes all the scss files which provide the default blue theme for senchaapplication.

• It looks like this

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.

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 commadit compiles your scss file as you change it.

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");

}

}

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:

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 senchadoes the css itself. Hence the styles, gradients created work for android as well as iOS.

Continued…

• While writing the css for senchacomponents one has to override many sencha styles and sometimes its very difficult to trace which classes or cssproperties 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.

Continued…

Css for button

.loginButton{

webkit-border-radius: 0.2em!important;

border-radius: 0.2em!important;

height:2.7em;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, white), color-stop(2%, #FDFDFD), color-stop(100%, #D9D9D9))!important;

}

Scss for button

@include sencha-button-ui('loginButton', #2D7AB4, 'glossy');

Css variables in sencha

• Like mixin sencha also provides css vars or variable for styling in sencha.

• Every component has its own set of cssvariable 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.

Theming in sencha

• I still have to learn it.