0

我在尝试显示来自 susy 2 的调试网格时遇到了麻烦。

基于此示例：

http://sassmeister.com/gist/9533822

我用

body
{
 @include container(show);

}

但是开发者工具的回报是：

https://www.dropbox.com/s/pskhjvwd631jux6/Screenshot%202014-08-24%2015.31.37.png?dl=0

SVG 网格不存在

我开始考虑我的 gulp 配置：

    // Include gulp
var gulp   = require('gulp'),

// Include Our Plugins
sass       = require('gulp-ruby-sass'),
compass    = require('gulp-compass'),
prefix     = require('gulp-autoprefixer'),
minifycss  = require('gulp-minify-css'),
jshint     = require('gulp-jshint'),
uglify     = require('gulp-uglify'),
imagemin   = require('gulp-imagemin'),
rename     = require('gulp-rename'),
rimraf     = require('gulp-rimraf'),
concat     = require('gulp-concat'),
notify     = require('gulp-notify'),
cache      = require('gulp-cache'),
plumber    = require('gulp-plumber');
livereload = require('gulp-livereload');

//Sass
gulp.task('styles', function() {
  return gulp.src('_scss/*.scss')
  .pipe(plumber())
  .pipe(compass({
        // Compass settings that would otherwise go in config.rb
        sass: '_scss',
        css: 'resources/css',
        image: 'resources/img',
        //environment: 'production',
        //environment: 'development',
        style: 'expanded',
        relative: true,
        //noLineComments: true
        require: ['susy', 'breakpoint']
      }))
  .pipe(prefix({ cascade: true }))
  .pipe(gulp.dest('resources/css'))
  .pipe(rename({suffix: '.min'}))
  .pipe(minifycss())
  .pipe(gulp.dest('resources/css'))
  .pipe(notify({ message: 'Styles task complete' }));
});

// Concatenate & Minify JS
gulp.task('pluginsjs', function() {
  return gulp.src(['_coffeescript/_plugins.js'])
  .pipe(plumber())
  .pipe(gulp.dest('resources/js'))
  .pipe(rename({basename:'plugins', suffix: '.min'}))
  .pipe(gulp.dest('resources/js'))
  .pipe(notify({ message: 'Plugins javascript task complete' }));
});

gulp.task('mainjs', function() {
  return gulp.src(['_coffeescript/_main.js'])
  .pipe(jshint())
  .pipe(jshint.reporter('default'))
  .pipe(plumber())
  .pipe(gulp.dest('resources/js'))
  .pipe(rename({basename:'main',suffix: '.min'}))
  .pipe(uglify())
  .pipe(gulp.dest('resources/js'))
  .pipe(notify({ message: 'Main javascript task complete' }));
});

// Optimize Images
gulp.task('images', function() {
  return gulp.src('_img/**')
  .pipe(plumber())
  .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
  .pipe(gulp.dest('resources/img'))
  .pipe(notify({ message: 'Images task complete' }));
});

//Clean everything
gulp.task('rimraf', function() {
  return gulp.src(['resources/css', 'resources/js', 'resources/img'], {read: false})
  .pipe(rimraf());
});

gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('_scss/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('_coffeescript/*.js', ['pluginsjs','mainjs']);

  // Watch image files
  gulp.watch('_img/**', ['images']);


  //Create LiveReload server
  var server = livereload();

  //Watch any files in dist/, reload on change
  gulp.watch(['dist + /**']).on('change', function(file) {
   server.changed(file.path);
 });

});

gulp.task('default', ['rimraf'], function() {
  gulp.start(['styles', 'pluginsjs', 'mainjs', 'images', 'watch']);
});

但是我停用了 imagemin 或任何可能会影响的东西，并且总是一样... :(

会是什么呢？

谢谢

4

1 回答 1

0

看起来您有另一个图像覆盖了 Susy 背景。尝试使用以下overlay选项：

body
{
  @include container(show overlay);
}
于 2014-08-30T21:18:46.660 回答