Use with compass?

[jleppert]

Is it possible (now or in the future) to use libsass with Compass? Compass does add a bunch of custom sass functions, and I'm wondering if it would be possible to call back into Ruby (using Ruby C API) for those functions (in lieu of writing all those functions in C)?

[craigbarnes]

See #78.

[HamptonMakes]

Yeah, this is definitely in the plans. We mostly use Bourbon and our own extensions ourselves, but a little bit of effort and we can get native function hooks in place.

[kaelig]

I use bourbon as well (and thought I would be able to use libsass to compile the project), but unfortunately it chokes on this piece of code:

@mixin box-shadow ($shadows...) {
    @include prefixer(box-shadow, $shadows, webkit spec);
}

ERROR -- views/legacy/utils/../../vendor/bourbon/css3/_box-shadow.scss:1: parameter list for box-shadow requires a ')'

Cf #73

[sroussey]

Something like a libcompass to go with libsass would be awesome.

[akhleung]

It'll be in the works as soon as I finish the current overhaul (should be done within the week)! See @chriseppstein's comment in #98.

[sroussey]

Awesome! I am working on theme generation for various frameworks that use Sass+Compass, and would love to do it client side (if I can get them as NaCL for Chrome for example), rather than have my poor server churn on stuff for 100,000 users with the browser extension. :/

[kud]

Nothing interesting but I'd really love to see compass support too. ;) :+1:

(or finding a way to generate sprite without compass...?)

[kaelig]

For sprite generation you can use grunticon: https://github.com/filamentgroup/grunticon

[kud]

Yeah I know, I already have a good process for svg to sprite but on desktop version, we still have a sprite coming from some png... :/

Either I still continue to use compass either I have to do a refacto on all our icons. The second one should/could be the solution but it ain't the right time.

[lessallan]

@hcatlin, my love, let's make this happen. I'm wanting to use http://usetakana.com + compass on our projects.

[Aurontwist]

+1

[mikew]

@kaelig Maybe I'm missing something in grunticon, but right in the first paragraph of their README it states

From a CSS perspective, it's easy to use, as it generates a class referencing each icon, and doesn't use CSS sprites.

Also their lack of generated dimensions makes it a no-go for me. Something like sprite-brunch might help some people though.

[miki-soichiro]

+1

[clifton]

:+1:

[kaelig]

@mikew, I confused grunticon with being a sprite generator because at the Guardian we use a modified version of it that generates a sprite image fallback: https://github.com/guardian/frontend/tree/master/tools/sprites

[deanmao]

Any progress on this one? We still use compass for some stuff, but would be nice to remove the ruby dependency. I wouldn't even mind writing C code if it lets us extend the features of libsass to do stuff, the same way that ruby's sass lets you write extensions.

I don't even use most of the features of compass, I just want it for the sprite handling. Of course there are other alternatives to sprite handling in node, but they don't use sass (stylus & less have some options I think)

I put the $50 bounty on it, but I guess I made the bounty anonymous, oh well.

[javoire]

+1

[RobinQu]

Is it possible to rewrite compass using node with node-scss, which is a binding of libscss?

[emagnier]

Recently with the addition of the @extend and Sourcemap features, I have the feeling that Libsass is becoming increasingly popular (there is also a nice community around node-sass, and it also start to be integrated in some IDEs!). Therefore a Compass port will be also more and more requested (notice the Bounty on this thread) :+1:

@hcatlin, @akhleung and/or @chriseppstein, do you have any plan for the coming "LibCompass"? Is the Compass port should be prioritized/separated by modules? For example, I personnaly use a lot Sprites, Image Dimensions and Inline Data modules (almost never the others).

Perhaps by creating an official repo with some basis code, the community could then help.

I don't know C/C++ well enough, but where I can I would love to contribute!

[RobinQu]

I came across some code of compass project, and found that it's pretty hard to implement the whole compass using node-scss:

1. Custom functions like inline-image have to be written in C/C++
2. Custom functions have to be registered with SCSS context. That means, if you are going to implement function in nodejs, you have to figure out how to teach C/C++ code to talk with javascript (Type conversion, scope) . I know this is possible with v8 and node binding API, but it's difficult. And I don't know why we should make such efforts to do so.

Despite the clues given above, there might be other options:

1. make void register_function(Context&, Signature sig, Native_Function f, Env* env); to support V8 JS function in node-scss.
2. Write a scss compiler in purely Javascript. (EST. one weak at least). As a result, the whole compass stack could be rewritten in Javascript, quick and clean.

[F21]

:+1: This would be awesome for us as we are finding the ruby scss with compass to be quite slow for some of our larger projects.

[zachlatta]

:+1: Would also be appreciated. I will <3 everyone here if this happens.

[andrejmlinarevic]

+1 For the idea. Would be a great performance enhancement and workflow speedup.

[gisu]

I think it makes more sense to bring Libsass on the same level off ruby-sass (Maps, List Improvements, root selectors etc), and than find a way to implement Compass Features in Libsass. The only thing that i miss from Compass is the Image Handling - but i have a grunt task for. Sprite Generation is nice but for me is not super important - we have several Grunt Tasks to build Sprites (with SVG support - compass didn't have SVG Sprites).

The most important is to hold the Compiletime - is the best thing off Libsass )

[akhleung]

Yeah, we're not planning to add Compass features directly to LibSass; rather, we intend to catch up with Ruby Sass, and implement a way for users to create dynamically loadable native extensions. This should allow Compass itself to be ported atop LibSass.

[mgreter]

I hope I'm allowed to mention https://github.com/mgreter/webmerge, which basically has all the features that @emagnier mentions (sprite sets, inline data urls, etc.). It's of course not a drop in replacement to Compass, but I guess the scss part of Compass could be adopted. If people are needing a framework that uses libsass, I would suggest to checkout webmerge. I hope @akhleung will excuse this advertisement! Keep up the great work with libsass (although my pull request regarding the c_interface is still open, but take your time to finsih the @extend feature)!

[MueR]

I just tried libsass (I was using ScssPhp) and wow. It's blinding fast. The only thing I had to fix to get compass working (so far) is this function, which I have to include before I can use compass:

@function -compass-list-size($list) {
    $compassListSize: 0;
    @each $i in $list {
        $compassListSize: $compassListSize + 1;
    }
    @return $compassListSize;
}

[jrmyio]

I used bower to add this repo https://github.com/Igosuki/compass-mixins which contains the compass mixins to libsass (via grunt-sass). I came across the same problem as MueR were the a function like -compass-list-size was not working. This and some other functions seem to come from ruby code instead of pure scss.

They can be found here https://github.com/chriseppstein/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb file.

I'm afraid there might be more functions that are used by regular mixins. The fact that libsass doesn't throw erros doesn't mean its doing what its supposed to do.

[polikin]

+1 libcompass

[amcc]

For the newbie can someone tell me how to get compass working with libsass using possibly the bower https://github.com/Igosuki/compass-mixins method above.

I have an existing project that uses compass and breakpoint - i'd love to be able to get it to work with libsass, but dont know how to tell libsass where the compass-mixins or breakpoint directory is (i've also downloaded the breakpoint package)

[MueR]

You will want to pass the paths to your compass and breakpoint directories via the -I (as in Isaac) parameter, and separate multiple paths with a colon (:)

/path/to/sassc -I /path/to/compass:/path/to/breakpoint myfile.scss

[amcc]

thanks for the help - is that something i do in the gruntfile, or elsewhere. Is there some documentation on that.

[MueR]

I personally do it in the class that handles SCSS files within our framework, by calling the compiler directly via proc_open (in PHP). But regardless, this would be something better suited on a site like StackOverflow rather than in this issue.

[amcc]

great gives me something to go on - thanks again

[rey]

+1

[JoshuaSoileau]

+1 for libcompass

[tassilogroeper]

+1

[Maidomax]

:+1:

[laurentperroteau]

+1

[jimjamdev]

I've got the same thing as compass-mixins that I'm using https://github.com/jimmyjamieson/compass-libsass. I'm trying to write a framework for myself but based on everything running off libsass. It's just getting my head around susy-next now.

[frederikbosch]

Jimmy, could you tell me what that repository does?

[F21]

@frederikbosch I believe that's a copy of the scss mixins from compass (ruby stuff removed) so that you can use libsass.

[frederikbosch]

But then that fixes this issue?

[F21]

No it doesn't, because compass has a lot of ruby bits (for example spriting, etc), which can't be used with libsass at the moment.

[frederikbosch]

AH, I get it. So, it only fixes the mixins?

[F21]

Yes, that's right.

[jimjamdev]

Yeah, it's the mixins. Not everything. I've reverted to susyone for the grid also until libsass can catch up with the features of susynext.

[jimjamdev]

Compiling of ms now instead of the 30 secs with ruby, or even longer over a network.

[chriseppstein]

This issue does not belong to libsass. It is on me to make compass compatible with libsass, not the other way around. I might have specific features that I need from libsass in order to make this work, and I will work with the libsass team to get those implemented.

Specifically, I've extracted compass-core as a separate rubygem with the goal of making that part of compass compatible with libsass. What I need right now is sass 3.3 compatibility. Focus on making libsass compatible with sass and I will make compass work with it.

[jsg2021]

+1