Sencha Touch - Undefined mixin 'experimental' on compass compile

Question

When I try to compile my sass code with compass compile I get the following error :

error app.scss (Line 42 of /MyProject/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.)

My sass code is pretty normal, I have :

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

/* Rest of my css below */

I'm using :
Sencha Touch 2.4 Compass 1.0.1 (Polaris) ruby 2.2.0dev Mac OSX Yosemite

I see the same issue too using Sencha Touch 2.3.1, Ruby 1.9.3, Compass 1.0.1 on windows. Has anyone seen the same issue. Is it related the latest compass version? — Sharan Rajendran
A rough workaround until we find a solution is to use sencha app watch on you app's root folder — Mehdiway

SleepyTonic SleepyTonic · Accepted Answer · 2014-12-14T20:51:59

Adding @import "compass/css3/shared"; to the project's app.scss resolves the error. This import needs to be added before the sencha imports.

For subsequent errors I also had to add:

@import "compass/css3/box";
$experimental-support-for-pie:false;

Versions: Sencha Touch: 2.4.1, Compass 1.0.1, Sass 3.4.9, Ruby 1.9.3

References: http://hugogiraudel.com/2013/03/25/compass-extensions/, http://compass-style.org/reference/compass/css3/box/,

Complete import to resolve the error:

@import "compass/css3/shared";
@import "compass/css3/box";
$experimental-support-for-pie: false;
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

<-- The rest of your sass -->

Sencha Touch - Undefined mixin 'experimental' on compass compile

1 Answers