小编pro*_*oad的帖子

我最近使用SASS 3.2 在我正在研究的项目中使用块实现了这种技术@content,我刚刚开始需要支持IE7和8等旧版浏览器.

例:

.overview {
  padding: 0 0 19px;

  @include respond-to(medium-screens) {
    padding-top: 19px;
  } //medium-screens

  @include respond-to(wide-screens) {
    padding-top: 19px;
  } //medium-screens
}

它们都不支持媒体查询,而且我经常在将媒体查询分成单独的部分文件(例如_320.scss,_480.scss和我的浏览器)时为这些浏览器提供所有样式来处理这个问题. IE样式表加载它们如下:

@import 320.scss;
@import 480.scss;
etc.

这将加载所有样式,并始终为IE7 - 8分配940px(或任何最大宽度)布局和样式.通过像这样在SASS 3.2中嵌套样式,它不需要单独的部分样式表,但完全搞砸了我为IE加载样式的方式.

关于如何打击这个的任何想法或解决方案？我可以使用诸如respond.js之类的polyfill来强制IE使用媒体查询,但更愿意只向IE提供一个非灵活的站点.

关于如何最好地组织这些文件或更好的解决方案的任何想法？

我有一个由组件组织的 SCSS 部分列表，我试图用 Gulp 单独编译这些组件，但不知道如何这样做。

这是我要编译的部分文件列表：

_header.scss
_button.scss
_navigation.scss

我想将这些文件输出到与

header.css
button.css
navigation.css

我正在使用gulp-sass以便将我所有的 SCSS 文件编译成一个文件，如下所示：

gulp.task('styles', function() {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src('./src/stylesheets/**/*.scss')
    // Run Sass on those files
    .pipe(sass({
      style: 'expanded',
    }).on('error', sass.logError))
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest('build/stylesheets'))
});

有没有办法创建一个单独的 Gulp 任务，该任务将单独编译和输出目录中的每个文件，而不是最后将它们组合成一个文件？

提前致谢。