-ssass-debug-info at my css

Question

我正在使用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})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]

但无法知道如何调试它或知道如何转换为正常的@media

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

Answer 1

如果您使用Grunt运行应用程序,则可以编辑Gruntfile.js文件.您正在寻找指南针部分.我在第175行找到了它.在该部分中,您希望将Server 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
    }
  }
},

通过将选项更改为false,您将无法在文件中获得调试信息.我建议您在开发过程中保留调试信息.当站点完成并准备好生产时,请删除调试信息.

最后,这不会删除CSS文件中的注释.您可能会注意到Compass在每个选择器的开头插入位置注释.(见下文)

/* line 19, ../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_normalize.scss */
body { margin: 0; }

要删除它,您将需要使用Minification.Grunt也可以照顾到这一点.您需要确保配置了Gruntfile.js.(我发现在每一行之前我都会用//注释掉.我必须删除那些行)之后就跑了

grunt cssmin

这两个步骤将475 KB CSS文件降至110 KB.

希望这可以帮助!