I have been using Gulp all summer for my projects, but one very useful feature I miss from compiling SCSS with Compass was that it would show what files have changed immediately as it would start compiling. I find this extremely useful.
I'm currently using Web Essentials 2013 update 4 to provide support for compiling .scss files in Visual Studio.
The tool has worked fine for me in the past however I have just created a new .scss file and have copied the bootstrap un-minified css into this new file.
Upon saving, the compilation window on the right hand side of the screen fails to update or display the compiled css or any error messages. Meanwhile, the blue bar at the bottom of my Visual Studio screen is stuck on
Compiling 0 dependent file for bootstrap.scss
Usually I would expect a bootstrap.css file to be generated from this as well as a bootstrap.min.css file but this is not happening.
Does anyone have any ideas how I can restore this back to normal working conditions?
This was to do with the settings I had in my WebEssentials-Settings.json file. In version 3, the 'UseRubyRuntime' parameter needed to be marked as true to allow it to auto compile into the relevant files. Since version 4 this can be marked as false as WE now has a built in compiler which I believe may have been conflicting with the RubyRuntime version I was trying to use.
I had a similar problem, after installing Web Essentials 2013 Update 4 the .scss files started throwing errors like this to the output:
Something went wrong reaching: ...
SCSS: Site.scss compilation failed: The service failed to respond to this request
Possible cause: Syntax Error!
The only solution for me was this:
Uninstall Web Essentials
Delete %AppData%\Local\Microsoft\VisualStudio\12.0
Delete %AppData%\Roaming\Microsoft\VisualStudio\12.0
Repair VS 2013.4
Reinstall Web Essentials
Source: https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361/view/Discussions/1#15143
And a heads-up: If you import other .scss files, make sure they are in the correct location. When I updated Twitter.Bootstrap.Sass 3.3.3 via NuGet, the related .scss files were moved to a different folder and I had to update references. For example:
Before:
#import "../sass/bootstrap/_utilities.scss";
After:
#import "../stylesheets/bootstrap/_utilities.scss";
I had the same problem, and spent some time uninstalling and re-installing Web Essentials. I tried deleting the parts of AppData that seemed to be related to Web Essential, all with no success at compiling the scss file.
So I created a new .scss with minimal content, that compiled. Then I started copying over pieces from the failing one. After a couple of copies, the new one failed too. I was able to zero in on the failure.
It was caused by this line:
$highlightcolor: #67a0f;
Do you see the problem? the hex color code is missing a digit. it should have been 67a0f5. Fixing this fixed the problem with the original file.
I had gone over the file looking for syntax errors, but didn't spot the short color def.
I hope this saves someone some time and frustration.
I had the same problem; in order to help diagnose it I created a minimal .scss file with dummy CSS rules - it generated the same error.
Then I went to my long-time tested and fully working legacy .scss file - it generated the same error. Something is wrong here, I thought.
After tinkering with the issue for a while, somehow it got fixed by closing Visual Studio, reloading and reopening the solution.
Referencing the changelog, as of 2.5 for update 4 of Web Essentials:
Removed all node.js based tools â—¦Sass/LESS compilers
JSHint/JSCS
linters CSS AutoPrefixer Handlebars compiler SweetJS/LiveScript
compilers
http://vswebessentials.com/changelog
So my understanding is, that it no longer compiles.
I am having the same problem and have eliminated actual syntax errors and incorrect path references. I have found two things out about this.
This happens when there is a file that only specifies variables and
has no actual scss or css markup. This is more of a hack as you
may have to put unwanted css in a variables file.
Turning off Autoprefixer will resolve the issue entirely, but at the cost of not using this feature.
I had this problem and determined that when I was running a Compile All SASS Files, the plugin was trying to compile files found in the /obj directory of the project which failed, and consequently caused subsequent compilation to fail. Deleting the /obj directory and restarting VS fixed the issue.
I had a similar issue and turn out to be a reference to a SASS variable before it was declared. There were no warnings or errors. Once I move the reference to the right place it all worked fine.
Going off of what others have said about Web Essentials. Looking at the change log, it states that for versions 2013 update 4 and up (meaning version 2015 as well),
Important! Bundling, minification and compilation of LESS, Sass and
CoffeeScript is not longer part of Web Essentials 2015. Install the
new extensions Bundler & Minifier and Web Compiler instead. Also, see
this list of other web development extensions that might be of
interest to you.
I found this neat little extension for visual studio, that compiles the SCSS file(s) on save into a CSS file (along with minification for that file).
You can get it here.
The guy that created this extension also talks about the Web Essential issue as well, found here.
I'm using SASS/SCSS as a preprocessor to compile my .scss files on Windows 7, and recently I've noticed that there is a delay of about 15 or 20 seconds between when I save my files and when I get my "Changes detected..." in my command line. In the past I got it instantaneously but now I get that delay. Why would this be the case? Does it depend on the size of the .scss file? (The one I'm working with is ~550 lines).
It can be related to the version of the SASS that you are using. There are few reports of this issue. (though those are pretty old)
On the other hand people are also experiencing slower compile speeds as their projects get bigger due to it being based on ruby. So maybe you could check this article out http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/
I have been using it with codekit for a while and had no such problems so far (hope it stays that way :).
Since you are on Windows, a good alternative to codekit is prepros. Those are not free apps, so maybe you could just try using compass with sass - you can set it up in a minute and it just might solve your issue- its worth trying.
You could also try using grunt - check this out https://github.com/sindresorhus/grunt-sass
I'm using Compass Sprite helpers in a project which works great. However the generation of the sprite adds quite a few seconds to the project compile time and most of the time I do not need it regenerated.
Is there a way to turn off the sprite generation and get compass to use the last generated file?
I'm using CodeKit and I'll be easily confused by much talk of command line / Ruby!
I've just tried it, and for me Compass does not recompile my sprites unless i modify the contents of the sprites folder:
$ compass compile
unchanged images/sexy-sce786a2ec5.png
overwrite stylesheets/screen.css
Try compiling your project with the compass command line tool instead of CodeKit. If it works out, please check that CodeKit uses Compass to compile your project and not vanilla SASS.
It looks like a CodeKit issue which is getting fixed:
https://github.com/bdkjones/CodeKit/issues/297
Until then I am using a workaround detailed here.
It looks as if compass compile with no other arguments (as per Andrey 'lolmaus's answer) does not cause this, but if there are any arguments at all it sets the :force option to true, and one of the consequences of that is that sprites are forcibly recreated.
That seems like crazy behaviour?
For the moment I've edited lib/compass/commands/update_project.rb (specifically, in my case, ~/.rvm/gems/ruby-1.9.3-p429/gems/compass-0.12.4/lib/compass/commands/update_project.rb) and commented out the parser.options[:force] = true line in the parse_arguments! function at the end of that file.
(note the unless arguments.empty? condition)
That seems to have disabled sprite generation entirely (i.e. even when you need it), but I can enable it manually with compass compile --force ...
That's certainly good enough for me.
The structure of my Compass projects has outgrown the capabilities of text editors like Sublime Text or TextMate/E. Example:
I'm in desperate need for variable/mixin names aoutcompletion and refactoring capabilities: renaming variables/mixins globally, moving files without breaking imports, etc.
I've tried latest JetBrains IDEs (RubyMine, PhpStorm, WebStorm, PyCharm) but they just can't handle Compass project structure. All variables are cosidered to be undefined, refactoring tools fail and other nasty things happen. Example:
So when it comes to Compass-powered SASS development, those paid IDEs yield to general programmer's editors like vim which at least have stupid yet working autocompletion.
The question is: what are the editors and IDEs that do have full-fledged Compass support?
PS I'm on Windows, but please suggest matching software for any OS.
I stumbled recently with the same sort of limitation.
Here's what I did.
Just go to your sass styleheets directory and create symbolic links to the compass framework source files living in the Compass gem's directory.
I assume a couple of things here:
You're using RVM to manage your Ruby versions
You're using bundler to manage your Gems
You're on a linux or os x based system
If this is not the case fear not! We will find the way.
How to find the location of this Gem's Sass source files?
just execute:
bundle show compass
path_to_rvm_files/gems/your_ruby_version#your_gemset/gems/compass-version
Of course your path may vary but that's the idea.
You should navigate to that directory in which you'll find a directory called frameworks, with some other directories within:
...
|_compass-xxxxx
|_frameworks
|_compass
|_stylesheets
|_compass
In the latest one, compass is where your important compass files are.
So you must create a symlink in your project pointing to that directory, and then your IDe will "figure out where the included or imported stuff is", so to speak.
How to create this symlink?
Go on the terminal to the project stylesheets directory and execute:
ln -s path_to_rvm_files/gems/your_ruby_version#your_gemset/gems/compass-version/frameworks/compass/stylesheets/compass/ compass
Hopefully this will sort out the problem with Compass own variables, mixins and so on.
On regards of your custom ones, my advice is to import them all on _base.scss/sass.
I use Rubymine myself and this has been my way to go so far.
Regards!