5

I generate my CSS and Source Mpas from SASS files using gulp-sourcemaps and I have noticed that sometimes, when an element has a color defined as a variable, the sourcemap points to the variable's SCSS file, rather than the element's SCSS file.

So if, for example, an element is styled in, let's say, "_nav.scss" and the color variable is defined in "_colors.scss":

.navigation-top a {
    font-weight: 600;
    color: $color__topnav-text;
    transition: color 0.2s;
}

The CSS Source Map for this element points to "colors.scss" in Chrome's DevTools instead of "nav.scss". This is the case only for a few elements. DevTools still points to the correct SCSS file for most elements, which use color variables.

Is this a Chrome bug, or is there a problem with the generated Source Map?

wordfool
  • 63
  • 5
  • Are you using the same logic pattern for your partials, or do you have some preceded by an underscore and some not? This could generate a bug. I can see that the partials you are mentioning have no underscore prefix. – Dimitris Damilos Sep 26 '17 at 10:10
  • 1
    All partials are preceded by an underscore (have edited original question), including variables, mixins etc. DevTools will also occasionally point at mixins as well as variables instead of the correct (parent) partial. – wordfool Sep 26 '17 at 16:04

0 Answers0