使用多个SASS文件

Chr*_*ris 14 css ruby-on-rails sass

我想将我的(巨型)全局css文件分成多个文件.我正在使用sass.是否有一种简单的方法可以让sass观看多个文件?我想我可以使用@import,但只是想知道是否有另一种(更好的)方式.

提前致谢.

Jan*_*nis 15

什么丰富的布拉德肖提到是正确的,但这里是另一种方法,你可以采取.

创建一个名为combined.scss (例如)@import的scss文件,然后在此文件中包含所有scss文件,然后运行sass --style compressed --watch combined.scss:combined.css,它将检测导入的scss文件的更改并根据需要重新编译.

Combined.scss 例:

@import "reset";
@import "layout";
@import "styles";
@import "ie";
Run Code Online (Sandbox Code Playgroud)

因此,当您对layout.scss文件进行更改时,combined.scss将重新编译,并且您需要引用的所有实际html页面都是combined.css.

但就像我说的那样,Rich Bradshaw的解决方案也同样有效,根据您正在进行的项目可能会更好用.

  • 另外一个注意事项:当您使用下划线(例如"_reset.scss")为附加样式表添加前缀时,Sass不会将它们编译为css.如果你在combined.scss中包含`@import"reset.scss`(下划线可以在这里省略),那么只有combined.scss才会被编译,即使某些包含的scss文件发生了变化. (2认同)

Ric*_*haw 8

我使用import,然后转到我的媒体目录,其中包含一个名为css的目录,其中包含我所有的css并运行sass --style compressed --watch css:css.这会从scss文件的大量产生一个css文件.

为了澄清这一点,如果您将导入的文件命名为以下划线开头,那么SASS不会尝试编译它们.

所以,如果你有一个名为style.scss的文件包含这些行,

@import 'reset';
@import 'blog';
Run Code Online (Sandbox Code Playgroud)

并且一些名为_reset.scss和_blog.scss的文件意味着当您运行上面的命令时,它会生成一个名为style.css的文件,其中包含所有其他文件.变量也被宣布为更高的工作量.