Compiling error when trying to change tabBar icon background color (using Sass) in Sencha Touch 2

Question

I used Sencha command to generate the app for me, and am now branding it using their Sass/Css documentation. You are supposed to be able to use the Sencha mixin for changing the bg color of the default icons in your tab bar:

@include mask-by-background($bg-color, $contrast, $style);

However no matter what combination of variables and values I use, I always get the compiling error "error app.scss (Line 38 of _gradients.scss: Properties are only allowed within rules, directives, mixin includes, or other properties.)" I am using the most updated versions of Sencha Touch, the SDK, and Sencha command.

Here is some of what I have tried so far:

$bg-color: #f2f2f2;
@include mask-by-background($bg-color, 80%, 'matte');


$bg-color: #f2f2f2;
@include mask-by-background($bg-color, $contrast: 80%, 'matte');


$bg-color: #f2f2f2;
@include mask-by-background($bg-color, $contrast: 80%, $style:'matte');

I even tried:

$bg-color: #f2f2f2;
$contrast: 80%;
@include mask-by-background($bg-color, $contrast, 'matte');

I am trying to use compass to change the css, instead of having to write huge rules like ".x-tabbar-red.x-docked-bottom .x-tab-active .x-button-icon" to override styling. Any thoughts?

SachinGutte SachinGutte · Accepted Answer · 2013-02-02T06:50:48

This is what I've been using to change background of tab panel and corresponding pictos.

$base-color: #fff;
$active-color: #08ae2d;

$base-gradient: 'glossy';
$tabs-dark: darken($base-color, 80%);
$tabs-dark-active-color: saturate($active-color, 20%);
$tabs-bottom-active-gradient: 'recessed';

This is for dark theme of mine, you'd definitely change color levels as per your need. And for more info regarding css mixins related to tabBar, you can refer the link

Compiling error when trying to change tabBar icon background color (using Sass) in Sencha Touch 2

1 Answers