-sass-debug-info at my css - html

Question

I'm working on a code with css and I found every class wrote before it
#media -sass-debug-info{filename{font-family:file\:\/\/C\:\/www\/w-balls-html\/html_source\/lib\/_master\.scss}line{font-family:\00003640}}
I found the at the doc of saas something about it
- ({#to_s => #to_s}) debug_info
A hash that will be associated with this rule in the CSS document if the :debug_info option is enabled. This data is used by e.g. the FireSass Firebug extension.
Returns:({#to_s => #to_s}) [debug-info-documentation][1]
but couldn't know how to debug it or know how to convert to the normal #media
#media all and (max-width: 699px) and (min-width: 520px))

Answer 1

If you are using Grunt to run your application, you can edit the Gruntfile.js file. You are looking for the Compass section. I found it around line 175. In that section you want to modify the the Server debugInfo to false.
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: false
}
}
},
By changing the option to false you will not have the debug info in the file. I recommend that you leave the debug info while in development. When the site is finished and ready for production THEN remove the debug info.
Lastly, this will not remove the comments out of the CSS file. You may notice that Compass inserts a location comment at the beginning of each selector. (See below)
/* line 19, ../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_normalize.scss */
body { margin: 0; }
In order to remove that you will need to use Minification. Grunt can also take care of that. You will need to make sure the Gruntfile.js is configured. (I found mine to be commented out with // before every line. I had to remove those lines) After that just run
grunt cssmin
These 2 steps took a 475 KB CSS file down to 110 KB.
Hope this helps!

Answer 2

I was trying to figure out how to use that information myself to edit the original SASS files and learned that it is used for developing using a FireSASS plugin.
If you want human readable debug line number you want the noLineComments grunt setting, like so:
debug: {
options: {
watch: false,
outputStyle: 'expanded',
debugInfo: false, // this generates browser debug info, not human friendly
noLineComments: false, // human friendly debug comments
}
},
Which will spit out something like:
/* line 18, ../../sass/config/_font-icons.scss */
[class^="icon"],
[class*=" icon"] {
font-family: "HW Icon Font";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}