New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 695056 link

Starred by 1 user
Status: WontFix
Owner:
█ lushnikov@chromium.org
Last visit 29 days ago
Closed: Nov 2017
Cc:
█ krajshree@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

LiveSASS doesn't support SASS variables in property names

Reported by erik.to...@gmail.com, Feb 22 2017 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce the problem:
Using LiveSASS with Zurb Foundation 5.x SCSS and node-sass.

1. Successfully setup source mapping in DevTools.
2. Edit a SCSS file, it updates the mapped workplace file.
3. LiveSASS does not update the page because LiveSASS fails to start.

What is the expected behavior?
LiveSASS should be able to resolve the source mapping even if the CSS property is a SCSS variable.

What went wrong?
Console outputs the following error:

LiveSASS failed to start: http://local.dev/cms/[...]/css/mbs.css.map
SourceMap is misaligned: right != #{$opposite-direction}
compiled: http://local.dev/cms/[...]/css/mbs.css?:1703:3
source: http://local.dev/cms/sites/all/themes/zurb_foundation/scss/foundation/components/_alert-boxes.scss:92:3

SCSS variable #{$opposite-direction} is a variable set by Foundation in _settings.scss, but because it is used to dynamically set a CSS property name ("left" or "right") LiveSASS fails to resolve the compiled result with the source.

Did this work before? N/A 

Chrome version: 56.0.2924.87  Channel: stable
OS Version: OS X 10.12.3
Flash Version: Shockwave Flash 24.0 r0

Comment 1 by krajshree@chromium.org, Feb 23 2017

Cc: krajshree@chromium.org
Labels: Needs-Feedback
erik.toyra@ - Thanks for filing the issue...!!

Could you please provide a sample url to test this issue.

This will help us in triaging the issue further.

Thanks...!!

Comment 2 Deleted

Comment 3 by erik.to...@gmail.com, Feb 23 2017 

@krajshree: I'll see what I can do. 

In the meantime, here's a sample of the actual SASS @mixin from Zurb Foundation that LiveSASS can't resolve a source map for. Note the #{$opposite-direction} variable which is compiled to 'right' in the CSS.

@mixin alert-close {
  font-size: $alert-close-font-size;
  padding: $alert-close-padding;
  line-height: 0;
  position: absolute;
  top: $alert-close-top;
  margin-top: -($alert-close-font-size / 2);
  #{$opposite-direction}: $alert-close-position;
  color: $alert-close-color;
  opacity: $alert-close-opacity;
  background: $alert-close-background;
  &:hover,
  &:focus { opacity: $alert-close-opacity-hover; }
}

Comment 4 by erik.to...@gmail.com, Feb 24 2017 

@krajshree: I created a repo on GitHub that you may clone to reproduce the bug. Go check it out at https://github.com/eriktoyra/devtools-livesass-bug.

Comment 5 by lushnikov@chromium.org, Feb 24 2017

Owner: lushnikov@chromium.org
Status: Assigned (was: Unconfirmed)
Summary: LiveSASS doesn't support SASS variables in property names (was: LiveSASS failed to start: SourceMap is misaligned: right != #{$opposite-direction})
Ah, indeed - we didn't expect sass variables to be used in property names.

Comment 6 by lushnikov@chromium.org, Nov 9 2017

Status: WontFix (was: Assigned)
LiveSASS experiment has been removed. See  crbug.com/782935
►

Sign in to add a comment