1

I've installed Web Compiler 1.11.315 by Mads Kristensen, and I'm trying to configure it now to recognize my Compass imports.

Compass modifies SASS, and therefore, I've been unable to figure out how to install it properly. The best I've been able to do is include the Compass stylesheets by copying these files to an include folder and directing my compilerconfig.json file to point at it.

That works - until you reference a mixin that uses some of the SASS extensions Compass installs: for example, legacy browser support with vendor prefixes in the CSS3 mixins.

So, what I'd like to do is install Compass properly with Web Compiler.

Has anyone managed to do that? If so, please explain. I've been unable to find anything on Google.

Compass' Ruby modules need to get loaded by SASS, but it would seem that Web Compiler can't do that because it uses node-sass which is based on libsass and doesn't use Ruby. Web Compiler's SassCompiler

So, I need to find an alternative that either doesn't extend SASS, or does so in a libsass supported way.

crush
  • 16,713
  • 9
  • 59
  • 100

1 Answers1

2

After doing some digging, I found that the Web Compiler Visual Studio extension uses libsass instead of the Ruby based Sass with which I was familiar. Due to the fact that it uses libsass, it can't use the Ruby based extensions that Compass relies upon to make certain mix-ins work.

I found a couple of resources that helped me get around this problem. The first were two drop-in replacements for Compass that removed the Ruby extension requirements from the mix-ins.

  1. https://github.com/Igosuki/compass-mixins (I used this one).

  2. https://github.com/jimmyjamieson/compass-libsass (this one hasn't been updated in awhile, but looks like it would work)

I just added these in an include folder inside my sass root folder within my project, and configured my compilerconfig.json accordingly:

[
  {
    "options": {
      "includePath": "src/sass/includes/compass"
    },
    "outputFile": "Content/css/output.css",
    "inputFile": "src/sass/input.scss",
    "minify": {
      "enabled": true
    },
    "includeInProject": true
  }
]

Next, I found mention the project Eyeglass which is run by the creator of Compass, Chris Eppstein.

At this time, I'm not sure if or how to use Eyeglass with Web Compiler, but perhaps someone else can figure it out.

crush
  • 16,713
  • 9
  • 59
  • 100