Sassy TSS – An Introduction

Why did you choose to use Titanium to develop your mobile apps?

Perhaps part of your answer was because it allows you to write your apps using JavaScript. If so, then you’ve likely used JavaScript before, probably while developing websites. And if this is the case, then there is a good chance you have been working with Cascading Style Sheets (CSS) as well.

Since the release of Alloy you have been able to separate your styling from your View’s XML, much like HTML and CSS work for websites. The XML syntax used by Titanium Views is easy to grasp if you’re used to seeing HTML5. However, the syntax used with Titanium Style Sheets (TSS) differs greatly from CSS.

Sassy TSS

STSS allows you to write the styling for your mobile app using a CSS-like syntax. And it doesn’t stop there! You’ll also get to benefit from the great features Syntactically Awesome StyleSheets (SASS) throws into the mix.

There are three primary advantages when writing your styles in STSS instead of regular TSS.

You get to:

  • Write your styles using a CSS-like syntax
  • Benefit from SASS’ full featureset
  • Use some handy additional STSS features

Let’s take a closer look!

CSS – Write your styles using a CSS-like syntax

I believe it is fair to say that a lot of Titanium developers already know how to write CSS. By now (hopefully) most of you also know how to write TSS. But wouldn’t it be nice if you could just stick to a single styling language? And if you’re new to Titanium, wouldn’t it be nice if you could just stick to what you are already familiar with? With STSS you can!

Syntax vs Semantics

Having said that, there are some caveats. You can’t simply run around writing CSS bits like:

.someView {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
}

Though the CSS syntax can be used, you can’t really use its semantics. Titanium Views do have a backgroundImage-, and backgroundRepeat-property, but there is no such thing as backgroundPosition.

Furthermore, backgroundRepeat expects a boolean value in Titanium, so the only valid values are true and false. You can’t use no-repeat in here. A similar issue exists for backgroundImage as it always expects a simple string URL in Titanium. It doesn’t know what to do when you wrap that in a url(...).

So, while you can use its syntax, you can’t copy CSS’ semantics blindly. You’ll have to pay close attention to the Titanium API to see which properties exist, and what values they can obtain.

Hyphens

Property names in TSS are camelCased, whereas in CSS hyphens are used to separate two terms. To further blur the line between with CSS, STSS allows you to use hyphens instead of camelCased property names. For example:

.someView {
    textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT;
    shadowColor: #111; 
    shadowOffset: {
        x: 1;
        y: 3;
    }
}

can also be written as:

.someView {
    text-align: Ti.UI.TEXT_ALIGNMENT_LEFT;
    shadow-color: #111; 
    shadow-offset: {
        x: 1;
        y: 3;
    }
}

SASS – Get Sassy!

Writing your styling using CSS is nice if you prefer using a styling language you are already familiar with. But what will really kick your styling efforts into higher gear is having full access to the power of SASS.

If you’ve never heard of it: SASS, or Syntactically Awesome StyleSheets is a preprocessor for CSS. Like its competitors (such as LESS and Stylus) it takes a specially formatted, CSS-like file and processes it into valid CSS.
SASS actually supports two different syntaxes, the older -deprecated- Sass and the newer -recommended- SCSS (Sassy CSS).

STSS builds on SASS to bring you a great bunch of additional features that will not only save you time, but will also reduce the size of your styling files. Internally STSS actually starts with (pre)processing each STSS file into an SCSS file. It then invokes the SCSS preprocessor, which is why STSS really supports all of SASS’ features.

However, not everything SASS brings to the table is useful since TSS and CSS work differently. To be specific, you will be able to benefit from awesome features such as: variables, mixins, functions and imports.

Unfortunately you will miss out on nested rules since TSS does not allow nesting at all.

And finally some features probably won’t impress you much, since they were already present in TSS, such as single-line comments. And though nested properties might look interesting at a first glance, TSS actually requires these properties to be nested, not flattened as SASS produces. It is actually a feature of STSS that makes sure SASS does not fold them into a single property.

For example, the following SCSS:

.someViewClass {
    font: {
        size: 12dp;
        face: Verdana;
    }
}

would be converted to regular CSS like this:

.someViewClass {
    font-size: 12dp;
    font-face: Verdana;
}

TSS however needs its nested properties to stay nested instead of flattened. STSS makes sure that happens.

STSS – Cherry On Top!

A large part of STSS is responsible for converting your STSS documents to SCSS, then to CSS and finally to TSS. It makes nested properties work and it allows for CSS-style quoting (you only need to quote strings) and use of hyphens. However, there are two more things STSS has to offer you that will make your life even easier:

Shorthands

Property names used in TSS are directly derived from the Titanium API. This makes sense, but unfortunately some of these names are quite lengthy. Their values can grow even lengthier, especially when you need to use Titanium UI constants. As a result, a lot of these values don’t really look like their -much shorter- CSS counterparts. This is why STSS comes with support for abbreviations, or shorthand notation. Shorthands are convenient, short aliases that you can use instead of the standard Titanium name or value. At the time of this writing only a few values have been made available, but their number will most certainly grow!

Shorthands allow you to write styling like:

Label {
    text-align: Ti.UI.TEXT_ALIGNMENT_LEFT;
}

as:

Label {
    text-align: left;
}

For an up-to-date list of all shorthands that are supported, please check the project’s documentation on Github.

Queries

Queries in TSS are probably the most visually distinct from the queries used in CSS. But, with STSS you can opt to use those @media-queries now as well, both as a container for selectors (like CSS), or nested inside a selector (like SASS adds).

So, you can still write your queries the TSS-way like this:

Label[platform=ios formFactor=handheld] {
    background-color: #f00;
    text: 'iPhone';
}

But you are also able -with the help of a few shorthands- to write them like this:

@media ios and (handheld) {
    Label {
        background-color: #f00;
        text: 'iPhone';
    }
}

or even like this:

Label {
    @media ios and (handheld) {
        background-color: #f00;
        text: 'iPhone';
    }
}

There are a few other query variations you can use to write your queries, and all of them produce the exact same TSS.
By the way, note that these @media-queries are in fact the only form of nesting that is allowed.

Complex queries

CSS queries are more flexible than queries in TSS. You can use this flexibility to your advantage in order to create more complex queries as well. For instance, the following STSS:

.someViewClass {
    @media ios, android and (handheld) {
        width: 200dp;
        text: 'Some text here';
    }
}

would result in the following TSS:

".someViewClass[platform=ios]": {
    width: "200dp",
    text: "Some text here"
},
".someViewClass[platform=android formFactor=handheld]": {
    width: "200dp",
    text: "Some text here"
}

Pretty neat!

STSS does not extend TSS, but CSS

One of the nice advantages of writing SCSS over regular CSS, is that SCSS is a super-set of CSS. That implies that you can simply rename a *.css-file to *.scss and SASS will simply accept that. By looking at the name, you might expect STSS works in a similar way with TSS. Unfortunately (or fortunately?), that is not the case. STSS is actually build on top of SCSS and as such even processes normal CSS and SCSS files without a hitch. Since TSS is a JSON-variant -which is very unlike CSS- it is not supported and will choke the STSS processor.

So, think of STSS as an extension of SCSS -not of TSS- and everything will go alright.

Conclusion

Aside from a being able to write your styling using a CSS-syntax, STSS will help you reduce the time spent on creating your styling, while also shortening the files you produce.

Since STSS is still relatively new, please be sure to report any bugs/issues you find on the issues-list on Github.

If you have other remarks or suggestions, be sure to post them in the comments! Happy styling!

Ronald Treur is a freelance developer and the co-founder of Snowciety, a multi-platform mobile app created using Titanium & Alloy. He has been developing websites since the age of 11 (starting out on paper due to lack of a real computer) and has been working on mobile apps since Titanium 1.5.
For development he has experience with Javascript, PHP and Java and to a lesser extent C and C++. For webdesign he relies on his knowledge of HTML5 and CSS3. Other interests include game-design, movies and talking at meetups (recent addition!).


Comments

  • Phil

    It was really frustrating on our last project to not have the power of STSS available to us but we’ve just started using this on a new project and it’s brilliant. Thanks very much Ronald for your work.

    It’s probably worth linking to https://github.com/dbankier/JAST for anyone who isn’t already aware of it.

  • Julian Buss

    Hi,

    Sassy TSS is very, very cool, thanks for your efforts! There is one thing I could not solve, though: how do I define an array, like for orientiationMode in a window?
    In TSS it would look like this:

    orientationModes: [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]

    How should it look in Sassy TSS?

  • Ronald Treur Post author

    Hi Julian, thanks for bringing that to my attention!

    I added an issue to the project (https://github.com/RonaldTreur/STSS/issues/10), since you’re absolutely right. It can’t be done at this moment, but soon you can!

  • Ronald Treur Post author

    Thanks for your kind words! It’s not yet perfect, but with the help of the community we’ll track down whatever bugs remain.

    And thanks for bringing up David’s JAST-project here. The post above is already too long for my taste (though it seems to become a signature thing for me), so I simply focused on STSS only. Nevertheless David is doing great work and JAST is certainly something everyone should look into!

  • BW

    Totally not worth it to make the syntax of TSS even more difficult with a SASS-style markup which in itself doesnt even support the best feature about SASS which is nested CSS.

    The changes in syntax and hyphenation will NOT aid you but instead will only make it harder to find the errors in your CSS.

    I dislike the featureset of TSS but I dislike this extension even more. Not recommended

  • Fokke Zandbergen

    I’d say its a matter of personal taste. STSS still adds plenty of functionality TSS doesn’t have.