Sass没有编译伪元素

Question

由于某种原因，Sass没有正确编译我的CSS样式。

在我的部分内容我有以下内容：

.governance-list-item {
  dt {
    display: inline-block;
    width: 35%;
    max-width: 300px;
  }

  dd {
    display: inline-block;
  }

  dd::before {
    content: '';
    width: 35%;
    max-width: 300px;
    display: inline-block;
  }
}

在编译的CSS文件中，我得到了这个：

.governance-list-item dd {
  display: inline-block;
}

.governance-list-item dd::before {
  content: '';
}

请注意，它也缺少dt样式以及大多数::before样式...当我使用在线linter时，结果就是我所期望的：

.governance-list-item dt {
  display: inline-block;
  width: 35%;
  max-width: 300px;
}
.governance-list-item dd {
  display: inline-block;
}
.governance-list-item dd::before {
  content: '';
  width: 35%;
  max-width: 300px;
  display: inline-block;
}

我无法理解为什么它没有正确编译。我尝试用类名替换dt和dd元素 - 没有运气。

我正在使用Gulp进行编译。这是我的依赖

"devDependencies": {
    "bower": "^1.6.5",
    "browser-sync": "^2.9.11",
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-concat": "^2.6.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-newer": "^0.5.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.0.4",
    "gulp-sass-lint": "^1.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.4.2",
    "gulp-util": "^3.0.6",
    "gulp-bless" : "^3.0.1",
    "imagemin-pngquant": "^5.0.0"
  }

这是Gulp任务

/* Primary gulp task to pre-process sass and deliver the concatenated + minified CSS output */
gulp.task('styles', ['printcss'] ,function() {
  return gulp.src(src.styles)
    .pipe(customPlumberErrorHandler('Error prococessing Styles'))
    // aim the pipe's output at the CSS destination directory:
    .pipe(newer(dest.css))
    // initialize the sourceMaps processor if gulp is run without '--type prod':
    .pipe(isProd ? gutil.noop() : sourcemaps.init())
    // process SASS if the file type is .scss:
    .pipe(gulpif(/\.scss$/, sass(options.sass)))

    .pipe(gulpif(/\.scss$/, sassLint()))
    .pipe(gulpif(/\.scss$/, sassLint.format()))
    .pipe(gulpif(/\.scss$/, sassLint.failOnError()))

    // run the CSS stream through autoprefixer:
    .pipe(autoprefixer(options.autoprefixer))
    // concat the stream files as a single named .css file:
    .pipe(concat('acm.css'))
    //only minify CSS if gulp is run with '--type prod':
    .pipe(isProd ? minifyCss(options.minifyCss) : gutil.noop())
    //only write-out the CSS sourceMaps if gulp is run without '--type prod':
    .pipe(isProd ? gutil.noop() : sourcemaps.write(doBless ? "." : undefined))
    //IE split - we only do this on prod builds right now until bless 4.0 fixes the bugs
    .pipe(doBless ? bless() : gutil.noop())
    //only copy to tomcat if gulp is run without '--type prod':
    .pipe(isProd ? gutil.noop() : gulp.dest(tomcat.css))
    // send livereload's reload signal:
    .pipe(isProd ? gutil.noop() : livereload())
    // write out the CSS in its final processed form:
    .pipe(gulp.dest(dest.css))
    // send browserSync's reload signal:
    .pipe(isProd ? gutil.noop() : browserSync.reload({stream: true}));
});

更新

我能够通过改变样式来解决这个问题，而不是使用浮点数。

.governance-list-item {
  dt {
    width: 35%;
    float: left;
  }

  dd {
    margin-left: 35%;
    padding-left: 5px;
  }

  dd::after {
    content: "";
    display: table;
    clear: both;
  }

  .officer-sub-title {
    font-style: italic;
  }
}

但是，这暴露了一种奇怪的行为。如果我在单独的sass部分和编译中添加以前的样式，旧的和新的样式将合并 - 但以前的样式正确显示！

这是编译结果

/* new */
.governance-list-item dd::after { 
  content: "";
  display: table;
  clear: both;
}

.governance-list-item dt {
  float: left;               /* new */
  display: inline-block;     /* old */
  width: 35%;                /* both */
  max-width: 300px;          /* old */
}

.governance-list-item dd {
  margin-left: 35%;          /* new */
  padding-left: 5px;         /* new */
  display: inline-block;     /* old */
}

/* old */
.governance-list-item dd::before {
  content: '';
  width: 35%;
  max-width: 300px;
  display: inline-block;
}

/* old */
.governance-list-item dd.first-of-position::before {
  width: 0;
}

知道为什么会这样吗？