Pushing the SASS theming envelope

[bklaas]

I've been spending some time going through David Kaneda's* excellent blog posts on SASS theming in Sencha Touch http://www.sencha.com/blog/2010/06/29/getting-sassy-with-css/
http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/

After doing some experimenting with it in my own application, I've had enough success that I've now migrated to using the SASS-generated CSS file.

Now I'd like to push what I can do with SASS to theme my application. SASS is brand new to me, so I imagine I'm a bit ham-handed with my skills. Also, I don't seem to be able to find very comprehensive documentation anywhere (perhaps because it's way out here on the bleeding edge?).

First question:

I styled a button UI like this--
$black: #000;
$button-color: $black;
@include sencha-button-ui('mybutton', $black, 'bevel');

this worked well for a button ui that produces a black button with the pre-canned bevel design. But what if I want the button to incorporate my own visual assets? Is there a method for delivering a more customized graphical treatment via SASS's @include sencha-button-ui?

Similarly, I'd like to have some ability to put gradients on a list item highlight treatment when tapped/pressed. So far I've only been able to manage changing the color. Is it possible to do more with this via SASS configuration?

cheers,
#!/ben

* as a fan of the Anime classic Akira, it is impossible for me to write David Kaneda's name without shouting "Kanedaaaaaaaaa!"

[davidkaneda]

Ha! One of these days, I'm going to have to actually watch Akira and see what this character's all about... At any rate, we do need better, hard-set, documentation for the theming engine. I can recommend my screencast from SenchaCon: http://vimeo.com/17879651.

To your question specifically, to extend our built in styles, simply add your own custom CSS (or SCSS). Once you have your black button, you can target it while developing in Safari/Chrome, see the rules applied (in your case, x-button-mybutton) and target those. It does require some basic CSS knowledge, but does that help?

[bklaas]

Thanks David, that does help. I've been toying with this further, and have discovered some SASS powers I didn't know were possible, particularly with redefining some of the sencha button gradient styles. For example, in my .scss file I'm now doing this for bevel:



@if $include-highlights {
@if $type == bevel {
@include linear-gradient(
color_stops(
lighten($bg-color, 50%),
lighten($bg-color, 30%) 3%,
lighten($bg-color, 20%) 30%,
$bg-color 65%,
darken($bg-color, 10%))
);
}
}


this has allowed me some fine-grained control for tweaks to the look-and-feel of these gradients. NEATO!

funny you should mention your vimeo presentation, as I was actually watching it when you posted to this thread :)

To the general forum public: there's lots of other great SenchaCon vids on Vimeo too. I watched the one on performance optimization yesterday and gleaned much good information there. http://vimeo.com/sencha/videos/sort:date

cheers,
#!/ben

[kevinv1990]

Hey,

I have been experimenting with SASS this midday, it is real interesting, I did follow some examples on sencha.com (the one with the three buttons). Now my target is to create a less big css file for my webapp, so I should shorten the ST css file. Any tips how I can start this process? (with the use of sass). Import the sencha css and than extends the things i need? After don't compile the sencha css to the new css so i will have less? Any example how i can do this, lets say for the tabbar (want my own colors on it).

Kevin