如何处理 scss 项目中的部分？答案

【问题标题】：How to handle partials in an scss project?如何处理 scss 项目中的部分？
【发布时间】：2014-01-17 09:37:10
【问题描述】：

以下问题：在我的服务器上，我在主目录中有一个 style.scss 文件 - 我使用了sass --watch style.scss:style.css --style compressed，因此每次编辑 style.scss 都会创建一个新的 style.css。在子目录中编辑“部分”后，我该怎么做才能创建新的 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 压缩

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

【问题讨论】：

试试：sass --watch <sass_folder>:<css_folder>
谢谢。但我已经尝试过了，但没有帮助。即使使用 sass --watch _my_partial.scss:my_partial.css --style 压缩它也不起作用。创建了一个 css，但主要 style.css 的内容没有改变...
您能否使用您正在运行上述命令的文件夹中的 sass 文件夹结构以及您正在运行的命令更新您的问题？

标签： ruby sass

【解决方案1】：

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

然后从my_theme_main_folder的级别运行：

sass --watch sass:css

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

【讨论】：

谢谢！但这对我来说会让事情变得复杂。因为我有一个目录 globals 和一个目录 mobile 具有相同的文件名和不同的内容，所以我必须在 Wordpress 中重新排列我添加的脚本。所以感谢您的帮助，但我不想更改我的文件夹结构，所以我必须找到另一个解决方案。

【解决方案2】：

是的，您的想法是正确的，如果 Sass 文件更新，您必须有一些东西来监视您的 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 这样的脚手架工具来简化它。

【讨论】：