[Phonegap+Sencha Touch][转] 移动开发33 四招减小Sencha touch项目css文件的体积

原文地址：http://blog.csdn.net/lovelyelfpop/article/details/39961079

英文原文：《4 Tricks for Smaller CSS in Sencha Touch 2.2》

太长，懒得翻译了，基本都能看懂

I recently had the pleasure of optimizing an app written in Sencha Touch 2.2 that was taking over 5 seconds to load on an Android 2.x device. The culprit was a 1.2 MB app.css file that I managed to bring down to just over 100 kB, resolving the issue. Here I present four techniques used to achieve this goal, along with individual outcome metrics. As a precursor to this article, I highly recommend that you read the Sencha Touch Theming Guide.

Avoid Redundant @import【不要重复@import scss文件】

Result: 1.23 MB -> 253 kB

This is a common mistake and by far the biggest impact on CSS bloat. By default, you have an app.scss file that has these two lines:

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

You can do all your work in this file, but with an app of any size you will soon need to split this up. You will write some of your code in a separate file and then import that separate file back into your app.scss by adding the following line to it:

@import 'MySeparateFile';

Inside MySeparateFile.scss, you should not re-import the ‘sencha-touch/default’ and ‘sencha-touch/default/all’. Bear in mind that this causes any generated CSS to be re-included in the final app.css. In my app, the redundant import was repeated multiple times in custom .scss files, resulting in almost a megabyte of CSS bloat.

Exclude Default Font and Icons【不要用默认自带的字体图标】

Result: 253 kB -> 156 kB

Sencha Touch 2.2 uses web fonts for icons and by default the entire set of nearly 100 icons are base64-jammed into the compiled app.css. If you’re using custom icons, you probably don’t need this. Luckily, this is very easy to turn off by setting the following variables in your app.scss:

$include-pictos-font: false;
$include-default-icons: false;

For a better understanding of the difference between these two options, I suggest you dive into the .scss source code in the Sencha Touch resources folder. If you’re using components like search fields or select fields, which use default icons for their default behavior, you might need to override their .scss to use icons from your custom font.

Exclude Experimental CSS【去除不需要支持的css前缀，比如-o-、-moz-】

Result: 156 kB -> 144 kB

This Compass article explains the concept very well. In summary, there is a lot of “experimental” CSS that Compass generates to accommodate not only the actual experimental prefixed features of common browsers, but to also account for “minority” browsers that you probably aren’t supporting anyway. All you have to do is add the following in your app.scss:

$experimental-support-for-mozilla : false;
$experimental-support-for-webkit : false;
// $support-for-original-webkit-gradients : false;
$experimental-support-for-opera : false;
$experimental-support-for-microsoft : false;
$experimental-support-for-khtml : false;

Notice how I commented out the 3rd line. My app was using a select field (aka combo box) for Android 2.x support, which uses old-style webkit gradients to achieve this effect in compact scenarios:

If I were to uncomment the 3rd line and recompile, I would see:

Exclude Unused Touch SASS【去除没有用到的组件scss】

Result: 144 kB -> 120 kB

Similar to how the class dependencies in Touch allow us to compile a JavaScript file with only the parts of the framework we need, we can achieve the same effect with CSS, albeit with more effort. I should warn you: you will probably need to dive into SASS source to effectively perform this step. For instance, the SASS file for select fields uses mixins defined in the SASS file for checkboxes. This means if your app is not using checkboxes, you might want to extract that mixin from the checkbox’s .scss file, assuming you don’t want to include the rest of the checkbox SASS.

Let’s recap; the default app.scss has these two lines:

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

The source code for these files is located in:

touch2.2/resources/themes/stylesheets/sencha-touch/_default.scss
touch2.2/resources/themes/stylesheets/sencha-touch/default/_all.scss

If you follow the source, the first file pretty much imports a bunch of .scss files from the “var” folder, which sets up various SASS variables. You will probably want to keep this file.

The second file imports the actual SASS used by individual components; it looks something like this:

...
@import 'Button';
@import 'Panel';
@import 'Sheet';
@import 'MessageBox';
@import 'Toolbar';
@import 'carousel/Carousel';
@import 'form/Panel';
...

The easiest way to go about this task is to take out “all” from your app.scss:

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

…and in its place put the individual imports from _all.scss; i.e. if you only use message boxes and toolbars in your app, you would add the following to app.scss:

@import 'MessageBox';
@import 'Toolbar';

When you try to compile this, you will likely run into some pathing issues. Fix:

@import 'sencha-touch/default/src/_MessageBox.scss'; 
@import 'sencha-touch/default/src/_Toolbar.scss';

欢迎加入Sencha Touch + Phonegap 群：194182999

共同学习交流（博主QQ：479858761）