Question

以下问题：在我的服务器上，我在主目录中得到了一个style.scss文件 - 我使用了sass --watch style.scss:style.css --style compressed，因此每次编辑style.scss时都会创建一个新的style.css。我需要做些什么才能在编辑了部分＆＃39;之后创建一个新的style.css。在子目录？

修改文件夹结构：带有style.scss和style.css的my_theme_main_directory my_theme_main_directory / css / globals

中的部分内容

我尝试过的：主目录中的命令： - watch css / globals：css / globals 以及在partials目录中： - watch _layout.scss：layout.css - style compressed 但没有创建新的style.css

我删除了style.css并再次使用： sass --watch style.scss：style.css - style compressed

最后这些更改都在style.css中，但我希望在部分编辑时自动生成style.css。

Answer 1

执行此操作的标准方法是将编译后的css文件与sass文件分开。在my_theme_main_folder创建文件夹sass中，将所有scss文件移到其中，包括部分（您可以根据需要构建它们）。

然后从my_theme_main_folder：

的级别开始运行

sass --watch sass:css

它会监视整个my_theme_main_folder/sass文件夹，并在第一个文件夹中的任何更改时将所有内容编译到my_theme_main_folder/css文件夹。

Answer 2

是的，你有正确的想法，你必须有一些东西观看你的Sass文件，如果他们更新，所以它知道建立它。 Grunt和Gulp都可以为您自动执行此操作。

这是一个例子

gulp.task('sass', function () {
  return gulp.src('sass/**/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest('./build/css/'))
    .pipe(notify({ message: 'CSS complete' }));
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['sass']);
});

这取决于您如何构建Sass构建结构。因此，在上面的示例中，我们查看文件夹/sass/并编译出所有部分。我会读你如果有机会，你也可以看看SMACSS。

您可以尝试使用Sassy Sass等脚手架工具，以便在您懒得自己组织时轻松实现。

如何处理scss项目中的partials？

2 个答案: