Html -我的css上的sass调试信息

我正在用css编写代码，我发现每个类都是在它之前编写的

@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/www\/w-balls-html\/html_source\/lib\/_master\.scss}line{font-family:\00003640}} 

我在saas的医生那里找到了一些关于它的东西 -（{#to#s=>#to#s}）调试信息

 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]

但不知道如何调试它，也不知道如何转换到普通的@媒体

@media all and (max-width: 699px) and (min-width: 520px))

---

如果使用Grunt运行应用程序，则可以编辑Gruntfile.js文件。您正在寻找指南针部分。我在175号线附近找到的。在该部分中，您希望将服务器debugInfo修改为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
    }
  }
},

为了消除这种情况，您需要使用缩小。Grunt也可以处理这个问题。您需要确保配置了Gruntfile.js。（我发现我的每一行前面都有//的注释。我不得不删除这些行）之后就开始运行

grunt cssmin

这两个步骤将475 KB的CSS文件缩减到110 KB

---

希望这有帮助

我自己试图弄清楚如何使用这些信息来编辑原始SASS文件，并了解到它用于使用FireSASS插件进行开发

如果需要人类可读的调试行号，则需要

noLineComments

grunt设置，如下所示：

debug: {
    options: {
        watch: false,
        outputStyle: 'expanded',
        debugInfo: false, // this generates browser debug info, not human friendly
        noLineComments: false, // human friendly debug comments
    }
},

它会吐出类似于：

/* 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;
}

---

此外，当您完成产品并准备好上传时，只需运行“grunt build”，这将运行所有最小化操作，包括cuss、html、JavaScript等，并将其放入“dist”文件夹中。只需将dist文件夹的内容在线上传到根文件夹，就可以了！

/* 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;
}