sass-module and frameworks integration

[7uc0]

Hi Players,

I've noticed the removal of embedded css frameworks within 1.0 sass
module. I've been strugling a while to handle frameworks in my app,
but I cannot get it to work. I'll share with you the steps I've been
folllowing :

Performed against Play 1.0.3.2 And 1.1
-locally -outside Play -

1. compass update following gem install instructions (http://compass-
style.org/docs/)
2. check haml + compass version installed (3.0.24 for haml,
0.10.6.gem)
3. framework stylesheets copy into may play app public/stylesheets
folder
4. at app level, .sass-cache removed + play clean + play test


Got 2 issues
---First One (not blocking)---

java.io.FileNotFoundException: /Users/erwan/work/PlayApp/public/
stylesheets/blueprint (No such file or directory)
at java.io.FileInputStream.open(Native Method)
at java.io.FileInputStream.<init>(FileInputStream.java:106)
at play.libs.IO.readContentAsString(IO.java:61)
at play.modules.sass.Engine.findDependencies(Engine.java:139)
at play.modules.sass.Engine.findDependencies(Engine.java:148)
at play.modules.sass.Engine.compile(Engine.java:67)
at play.modules.sass.Plugin.serveStatic(Plugin.java:24)
at play.server.HttpHandler.serveStatic(HttpHandler.java:248)
at play.server.HttpHandler$MinaInvocation.init(HttpHandler.java:479)
at play.Invoker$Invocation.run(Invoker.java:174)
at play.server.HttpHandler$MinaInvocation.run(HttpHandler.java:488)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:
441)
at java.util.concurrent.FutureTask$Sync.innerRun(FutureTask.java:303)
at java.util.concurrent.FutureTask.run(FutureTask.java:138)
at java.util.concurrent.ScheduledThreadPoolExecutor
$ScheduledFutureTask.access$301(ScheduledThreadPoolExecutor.java:98)
at java.util.concurrent.ScheduledThreadPoolExecutor
$ScheduledFutureTask.run(ScheduledThreadPoolExecutor.java:206)
at java.util.concurrent.ThreadPoolExecutor
$Worker.runTask(ThreadPoolExecutor.java:886)
at java.util.concurrent.ThreadPoolExecutor
$Worker.run(ThreadPoolExecutor.java:908)
at java.lang.Thread.run(Thread.java:680)


--- Second One (Blocking) --
_grid.scss:48:in `blueprint-grid': Invalid CSS after ".column,
enumerate": expected selector, was "("div.span",
1,..." (Sass::SyntaxError)

within _grid.scss, line 48, # is not welcome
.column, #{enumerate("div.span", 1, $blueprint_grid_columns)} {
@include column-base; }

Trouble is scss compiles fine when dealt agains compass inner haml
engine and not Plugin one. Any hint about frameworks integration (no
rb file imported) ?

Thx alot

[Guillaume Bort]

Yes the latest version of the SASS module does not include anymore the
compass framework. But it's easy to add again, just drop it into the
public/ directory of your application.

> --
> You received this message because you are subscribed to the Google Groups "play-framework" group.
> To post to this group, send email to play-fr...@googlegroups.com.
> To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.
>
>

--
Guillaume Bort, http://guillaume.bort.fr

For anything work-related, use g...@zenexity.fr; for everything else,
write guillau...@gmail.com

[7uc0]

Guillaume
That's what I've done and why I'm posting, since I'm able to get it
work on compass standalone install, but not within Play. I've been
playing around with compass / haml / stylesheets versions
combinations, but none of them work.

E.

> Guillaume Bort,http://guillaume.bort.fr

>
> For anything work-related, use g...@zenexity.fr; for everything else,

> write guillaume.b...@gmail.com

[Guillaume Bort]

Hum, I've just copied the compass directory to the public/stylesheets directory.

My layout looks like:

/public
/stylesheets
/compass
/css3
/layout
/reset
/utilities

> For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.
>
>

--
Guillaume Bort, http://guillaume.bort.fr

For anything work-related, use g...@zenexity.fr; for everything else,

write guillau...@gmail.com

[7uc0]

Ok Found it. My S[a/c]sses are at module level (pathed with module
name). css generaiton works fine if frameworks are deployed at
AppLevel, wihint public/stylesheets folder, but are not handled at
module level (in the same way as templates / tags).

Am I right ? I'll take a look at the plugin code to see what its
about.

.E

[Guillaume Bort]

Yes try to debug (the code is really simple) and tell me if something is wrong.

> For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.
>
>

--
Guillaume Bort, http://guillaume.bort.fr

For anything work-related, use g...@zenexity.fr; for everything else,

write guillau...@gmail.com

[Marcello Bastéa-Forte]

Not being familiar with compass, what functionality does it add over the sass plugin? From their site's video it sounds it adds dynamic recompilation of sass (which the play module does already), and some sass mixin "libraries"?

Marcello

[Per Wiklander]

On Nov 24, 5:51 pm, Marcello Bastéa-Forte <marce...@cellosoft.com>
wrote:

> Not being familiar with compass, what functionality does it add over the
> sass plugin? From their site's video it sounds it adds dynamic recompilation
> of sass (which the play module does already), and some sass mixin
> "libraries"?

Short version:
Yep, that's pretty much it. Those libs help a lot though. And in non
Play! environments I use the auto recompile all the time.

Longer version:
This is a cut and paste from my base.scss:

// Blueprint
//
----------------------------------------------------------------------------
@import "blueprint/reset";
@import "blueprint";
@include blueprint-utilities;
@include blueprint-debug;
@include blueprint-interaction;
@include blueprint-form;
@include blueprint-typography;

// Compass extras
//
----------------------------------------------------------------------------
@import "compass/utilities/lists";
@import "compass/utilities/text";
@import "compass/utilities/general/clearfix";
@import "compass/utilities/general/float";

As you can see I'm a heavy user of blueprint. I usually work with some
form of grid in my design work.
I never understood why anyone would want to use blueprint as described
here:
http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/

where you put layout code in your HTML like this:

<div class="span-17" id="content">
...
<div class="span-8">
...
</div>
<div class="span-8">
...
</div>
</div>

With Compass and blueprint it becomes more like this:

HTML:
<div id="content">
...
<div class="column">
...
</div>
<div class="column">
...
</div>
</div>

SCSS:

@import "blue_print_stuff.scss";

// Blueprint settings
//
----------------------------------------------------------------------------
$blueprint-grid-columns: 12;
$blueprint-grid-width: 60px;
$blueprint-grid-margin: 20px;
$blueprint-container-size: ($blueprint-grid-width + $blueprint-grid-
margin) * $blueprint-grid-columns - $blueprint-grid-margin;

#content {
@include column(17);

.column {
@include column(8);
}
}

/Per

[Guillaume Bort]

Yes I agree, using sass is the right way to use blueprint.