Using Sass - Pixate/pixate-freestyle-ios GitHub Wiki

The Pixate Engine's CSS support is based on the W3C's CSS specification, and as a result, it means that most CSS tools out there, like CSS preprocessors, should work just fine. This article is going to show you how to set up Xcode to automatically compile your Sass stylesheets into CSS that Pixate Engine can use. Now, this isn't to say we have a preference (see this shootout), as this technique can be applied to any preprocessing system, we just happen to choose Sass for this example.

Let's jump right in. Start by going to a Xcode project you have and click on the project itself in the Project Navigator. You should see the project settings in the main view. Click on the Build Rules tab. At the bottom, right of the main view you'll see a Add Build Rule button, click it.

Now we'll enter the following into the various fields. Of course, this is where you'd change these values for whatever system you are using.

In this case, I'm using RVM so I first set up the environment variables then call the sass tool. Here's the settings I used in case you want to copy/paste them:

source /Users/${USER}/.rvm/environments/default
${GEM_HOME}/bin/sass ${INPUT_FILE_PATH} ${TARGET_BUILD_DIR}/${INPUT_FILE_BASE}.css

Now, in your project, you can use a default styling file called default.scss (instead of default.css). Here's an example of a simple one I created:

$mainColor: blue;
$borderRadius: 10px;
$borderWidth: 5px;

#myButton {
    color           : white;
    background-color: green;
    border-color    : $mainColor;
    border-radius   : $borderRadius;
    border-width    : $borderWidth;
    border-style     : solid;
    &:highlighted {
        background-color: purple;
        border-color    : desaturate($mainColor, 90%);
        border-radius   : $borderRadius;
        border-width    : $borderWidth;
        border-style      : solid;
    }
}

Notice here I used variables ($mainColor, $borderRadius, and $borderWIdth) as well as nesting the highlighted state of the button.

That's all there's to it. Just adjust add a Build Rule in your Xcode project for your favorite CSS preprocessing tool and then you can have CSS goodness and an even more powerful styling experience with the Pixate Engine!

[Published: 2013-01-19]