Device Specific Styles

[Nate Hunzaker]

Before I say this, I hope I do not come across as insane -- but I had
an idea.

What if, upon compilation, Mulberry generated a "device.scss" file
with variables about the environment. This way, logic could be added
to automatically better match device UI for things like standardized
icons.

This way, if I wanted to make a mixin for a back button:

@mixin back-button {

@if $platform == iOS {
// show the native iOS back button
} @else {
// Default to a standard back button
// or possibly none at all?
}

}

There may be better a implemented than a generated file with the tools
Sass provides within its API, I just don't have much of a foothold in
this area. Other than that, thoughts?

[Daniel Imal]

Not insane at all, but we've handled it a little differently. We put
classes on the body tag with that environment info. So you could write
that as:
@mixin back-button {
.ios & {

}

.android & {

}
}

And the selectors will target the OS correctly. We could create a
device.scss file, but we've tried to keep the compilation step as
simple as possible and do as little OS branching as possible. And
we're also looking forward to deploying apps to mobile web, where we
won't know the os at compile time. Hope this helps.

[Nate Hunzaker]

Works for me, that totally addresses my use case anyway.