Influence image-url for SASS / SCSS / Compass in Visual Studio & Web Essentials

[rockstardev]

I have scss file in Visual Studio, I've imported compass this guide:

SASS AND SCSS IN VISUAL STUDIO 2013 WITH WEB ESSENTIALS – STARRING COMPASS AND SUSY

However now when I do in scss:

background: image-url('../img32/intro.jpg');

I get:

background: url("/../img32/intro.jpg")

How can I influence that output path? Can I somehow say to SASS compiler not to change path at all (just leave ../img/intro.jpg)?

[am11]

Hi,

Short answer: Yes you can. Have source and target paths equal and WE will not post-process your paths. CssCompilerBase.cs#L15. I will add a new option for vNext to explicitly specify whether you want this post-processing or not.

Note that Less provides this option out of the box, while Sass does not resolve your image parth.

Story: WE uses node-sass, which in turns uses libsass. LibSass is an alternate implementation of ruby-Sass, written in C++ hence outperforms ruby-sass compiler considerably. Compass extends the functionality of ruby-sass. For libsass however, plugin features is just arrived: https://github.com/sass/libsass/pull/919 and yet to land in node-sass.

Having said that, libsass was using its own implementation of image-url to provide this auxiliary feature, which is dropped as it is non-standard Sass syntax: https://github.com/sass/libsass/pull/834.

However, there is an open proposal to add this function in Sass standard: https://github.com/sass/libsass/issues/532, inspired by less feature.

Web Essentials also uses Ruby-Sass via alternative ruby runtime, which was implemented by @davidtme: https://github.com/madskristensen/WebEssentials2013/pull/1582. I don't know if it provisions the Compass plugin.

[rockstardev]

@am11 Can you please give me example of where "source and target paths equal" I don't get it - what am I supposed to do?

I am also getting this error - is this related:

3/31/2015 12:42:59 PM: An exception was thrown when updating TextView property: System.NotSupportedException: The given path's format is not supported. at System.Security.Util.StringExpressionSet.CanonicalizePath(String path, Boolean needFullPath) at System.Security.Util.StringExpressionSet.CreateListFromExpressions(String[] str, Boolean needFullPath) at System.Security.Permissions.FileIOPermission.AddPathList(FileIOPermissionAccess access, AccessControlActions control, String[] pathListOrig, Boolean checkForDuplicates, Boolean needFullPath, Boolean copyPathList) at System.Security.Permissions.FileIOPermission..ctor(FileIOPermissionAccess access, String[] pathList, Boolean checkForDuplicates, Boolean needFullPath) at System.IO.Path.GetFullPath(String path) at MadsKristensen.EditorExtensions.Base64Vlq.GetName(Int32 index, String basePath, String[] sources) at MadsKristensen.EditorExtensions.Base64Vlq.d0.MoveNext() at System.Linq.Enumerable.Count[TSource](IEnumerable`1 source) at MadsKristensen.EditorExtensions.CssSourceMap.PopulateMap(String targetFileContents, String mapFileContents) at MadsKristensen.EditorExtensions.CssSourceMap.Initialize(String targetFileContents, String mapFileContents, String directory, IContentType contentType) at MadsKristensen.EditorExtensions.CssSourceMap.<>cDisplayClass1.b0() at System.Threading.Tasks.Task.InnerInvoke() at System.Threading.Tasks.Task.Execute() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at MadsKristensen.EditorExtensions.CssSourceMap.d3.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at MadsKristensen.EditorExtensions.Margin.CssTextViewMargin.d__1a.MoveNext()

[am11]

Hi, sorry I was unable to add that option, as I was unable to compile the project because of path too long issue.

Can you please give me example of where "source and target paths equal" I don't get it

I think if .scss and .css file in the same folder and the image URL normalizer should be skipped. Meaning make sure you do not have Custom output directory set under Tools > Options > Web Essentials > SCSS.

[rockstardev]

@am11 Well the problem for that case is usage of partials - like I have main.scss in one folder where it generates main.css. But since I am using partials (as probably 99% of other people) - that path translator kicks in and messes up all URLs.

I get that it is complicated to expose node-sass & libsass settings - but this is definitely deal breaker - I've been trying to find a way around this for past 2 weeks and the only thing I could do is stick with absolute urls, like /path/to/img.jpg.

Definitely would appreciate if someone provides option for $image-url not to touch my urls if not allow me to configure path. I would implement it myself, but I am unsure where to start...

[am11]

@lepipele, I agree. I am afraid currently there is no option available in WE2013 for your scenario. I will try to revisit the build issue (after node-sass next beta release) and make the auto path resolution option disableable.

[am11]

Copy: https://github.com/Microsoft/msbuild/issues/57.