CODEWITHSUNDEEP
sencha-touchsencha-touch-2themessasssencha-touch-2.1
Gowthami Gattineni
Gowthami Gattineni

Reputation: 509

_Class.scss: Undefined variable "$font-family" in Sencha Touch theme

I am trying to add a new customized theme to my app, but it is raising the following error when I am compiling on Compass:

_Class.scss: Undefined variable: "$font-family"

I tried to change the html,body font in _Class.scss to $font-family, but it doesn't work. My Sencha Touch version is 2.2.1. How can I solve this issue?

// Let's start with the basics
$base - color: #CC0000;
$active - color: #850000;

// Buttons
$button-gradient: 'bevel';

// Lists
$list-bg-color: # eee;
$list - color: #333;
$list-pressed-color: # ddd;
$list - active - gradient: 'recessed';
$list - header - bg - color: #990000;
$list-header:white;
$list-header-gradient: 'bevel';

// Tabs
$tabs_dark_color: #000;

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

@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;

@include sencha-msgbox;
@include sencha-loading-spinner;

@include sencha-button-ui('action', #ffc801);
@include sencha-button-ui('decline', desaturate(darken(#b8a7a7, 10%), 5%));

.x-tabbar-dark .x-tab {
    color: white;
}
.x-list-header {
    color: white !important;
}
.x-list-round .x-list-header {
    color: #777 !important;
}
.x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon {
    background: white !important;
}

Upvotes: 1

Views: 2770

Answers (2)

Hardeep Singh
Hardeep Singh

Reputation: 780

create folder named stylesheets where you placed config.rb

I have created folder styles where I placed config.rb file

copy folder fonts from touch\resources\themes\fonts to styles/stylesheets/ folder

Upvotes: -1

Bram
Bram

Reputation: 4613

This is a rather old post but for the sake of completeness. I ran into this issue yesterday. It occurs because you did not import the default theme variables.

You did import sencha-touch/default/all but these are not the variables. The variable reside in sencha-touch/default

@import 'sencha-touch/default'; should resolve the issue.

Upvotes: 0

Related Questions