-sass-调试信息

我的工作与CSS代码，我发现每节课写-sass-调试信息

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

我发现在SaaS的东西DOC它前 - （ {#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))

来源

2014-09-29 Mustafa Adel ELnagar

如果您使用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; }

为了消除这种情况，您需要使用缩小。咕噜也可以照顾。您需要确保已配置Gruntfile.js。（我找到了我与//每行前注释掉。我不得不删除这些行），之后只需运行

grunt cssmin

这2步花了475 KB CSS文件下降到110 KB。

希望这会有所帮助！

来源

2014-11-06 19:31:41

此外，当您与做你的产品，并准备上传，只需运行“grunt build”即可运行所有最小化操作，包括cuss，html，JavaScript等，并将其放入“dist”文件夹中。只需将dist文件夹的内容上传到根文件夹，即可开始使用！ – 2014-11-18 07:18:57

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

如果你想人类可读的调试行号你想要的noLineComments咕噜设置，就像这样：

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

来源

2016-02-05 02:36:57

-sass-调试信息

回答

相关问题