Sass partials?

125 views
Skip to first unread message

Charles Roper

unread,
Oct 6, 2009, 10:26:00 AM10/6/09
to nanoc
Hi,

I'm trying to use Compass with nanoc. Compass makes heavy use of Sass
partials, but it looks like nanoc might not support partials judging by
the error I'm getting when I compile:

Sass::SyntaxError: File to import not found or unreadable: base.sass.

Info: http://sass-lang.com/docs/yardoc/SASS_REFERENCE.md.html#partials

Is this a limitation of nanoc, or is there something I can do to get
partials working correctly?

Cheers,
Charles
--
Charles Roper
http://charlesroper.com | http://twitter.com/charlesroper

Charles Roper

unread,
Oct 6, 2009, 12:33:09 PM10/6/09
to nanoc
Here's a screenshot of how I've got everything hooked up, if that
helps:

http://i34.tinypic.com/9zn686.jpg

Charles

Denis Defreyne

unread,
Oct 6, 2009, 3:28:08 PM10/6/09
to na...@googlegroups.com
On 06 Oct 2009, at 16:26, Charles Roper wrote:

> I'm trying to use Compass with nanoc. Compass makes heavy use of Sass
> partials, but it looks like nanoc might not support partials judging
> by
> the error I'm getting when I compile:
>
> Sass::SyntaxError: File to import not found or unreadable:
> base.sass.
>
> Info: http://sass-lang.com/docs/yardoc/SASS_REFERENCE.md.html#partials
>
> Is this a limitation of nanoc, or is there something I can do to get
> partials working correctly?

Hi,

I am not a Sass user, but it seems that nanoc's Sass filter wants a
path relative to the nanoc directory--not the directory that contains
the Sass file. So, instead of doing this:

@import mypartial.sass

… you have do to this:

@import content/assets/style/mypartial.sass

This is not as nice, of course, but it works.

Regards,

Denis

--
Denis Defreyne
denis.d...@stoneship.org

Charles Roper

unread,
Oct 6, 2009, 3:40:11 PM10/6/09
to na...@googlegroups.com
2009/10/6 Denis Defreyne <denis.d...@stoneship.org>:

> So, instead of doing this:
>
>        @import mypartial.sass
>
> … you have do to this:
>
>        @import content/assets/style/mypartial.sass
>
> This is not as nice, of course, but it works.

Thanks Denis. Chris Eppstein was actually able to solve this issue in
a more elegant fashion; have a look towards the end of this thread:

http://groups.google.com/group/compass-users/browse_thread/thread/254260244a291ab4/9456c53b27af1fac#9456c53b27af1fac

Do you have any thoughts regarding working around the current
requirement for a companion (empty, redundant) yaml file for each sass
file? Chris suggests a SassDataSource. What do you think?

Cheers,
Charles

Denis Defreyne

unread,
Oct 6, 2009, 3:50:45 PM10/6/09
to na...@googlegroups.com
On 06 Oct 2009, at 21:40, Charles Roper wrote:

> Do you have any thoughts regarding working around the current
> requirement for a companion (empty, redundant) yaml file for each
> sass file? Chris suggests a SassDataSource. What do you think?

In nanoc 3.1, these YAML files will be optional, regardless of which
filesystem-based data source you use (filesystem, filesystem_combined,
filesystem_compact). Check out <http://projects.stoneship.org/hg/nanoc/rev/854807986500
> for the details.

Denis Defreyne

unread,
Oct 6, 2009, 4:26:58 PM10/6/09
to na...@googlegroups.com
Hi,

The real problem with Sass partials is that it doesn't work well with
nanoc's data sources. This is not nanoc's fault and certainly not
Sass' either; it's just lack of coordination between two distinct
projects.

What I mean is that Sass loads partials (using @import) from the
filesystem. nanoc's data can come from various sources--you could even
download a Sass file over the internet and compile it to a .css file
locally. What Sass should be able to do in order to integrate well
with nanoc, is allow using @import with item identifiers. For example,
this would be neat:

@import /assets/style/parts/layout
@import /assets/style/parts/typography
@import /assets/style/parts/colors

Or even relative to the current item, like this:

@import ./parts/layout
@import ./parts/typography
@import ./parts/colors

What you could do instead of the above (which will probably never be
implemented), is let the Sass file be filtered using an ERB filter
first, which would include the partial Sass files. Those are not
actual Sass partials--they'd just behave like Sass partials. For
example, the following could work:

<%= @items.find { |i| i.identifier == '/assets/style/parts/
layout/' }.compiled_content %>
<%= @items.find { |i| i.identifier == '/assets/style/parts/
typography/' }.compiled_content %>
<%= @items.find { |i| i.identifier == '/assets/style/parts/
colors/' }.compiled_content %>

(This code example uses the #compiled_content convenience function
which will be available in nanoc 3.1. If you want to use it in nanoc
3.0, grab it at <http://groups.google.co.uk/group/nanoc/browse_thread/thread/d03777d22c02018f
>.)

This approach may be quite useful. This is probably not a great
approach, though; including ERB in Sass probably feels a bit dirty.
Syntax errors in those file will likely also be hard to track down. I
know that Haml can include executed Ruby code, but can Sass? If so,
you could use Sass directly instead of running it through ERB first.

Hope this helps,

Denis Defreyne

unread,
Nov 1, 2009, 5:44:15 PM11/1/09
to na...@googlegroups.com, Charles Roper
Hi,

It just occured to me that the problem with Sass partials really isn't
hard to solve at all. Somehow, I have the feeling we tried to solve
the wrong problem and ended up not solving it at all. Perhaps I'm a
bit late with the _real_ solution, though.

I said

> So, instead of doing this:
>
> @import mypartial.sass
>
> … you have do to this:
>
> @import content/assets/style/mypartial.sass

… but this isn't correct. You *can* do
@import mypartial.sass
as long as sass_dir is set up correctly. If stylesheets are located in
content/assets/style/, then the configuration file should have
sass_dir = 'content/assets/style'
and if there is a partial at content/assets/style/_mypartial.sass,
then you can simply use
@import mypartial.sass
or even
@import mypartial
to import it (meaning actually include the contents of the partial,
and not just create a CSS @import url(...) rule). This is IMO a
solution that is quite clean.

I have created a nanoc bootstrap site that uses Compass and uploaded
it to <http://stoneship.org/pub/nanoc-bootstrap-compass.tar.bz2>. I
will probably put this in a repository at some point, so that people
can easily contribute to it.

Hope this helps,

Reply all
Reply to author
Forward
0 new messages