Rails中正确的SCSS资产结构

Rails中正确的SCSS资产结构

CSS的问题是，您不想自动添加所有文件。浏览器加载和处理工作表的顺序至关重要。因此，您将总是最终明确地导入所有CSS。

例如，假设您有一个normalize.css工作表，以获取默认外观，而不是所有可怕的不同浏览器实现。这应该是浏览器加载的第一个文件。如果只是将此表随机包含在CSS导入中的某个位置，则它将不仅覆盖浏览器的默认样式，而且覆盖所有在其之前加载的CSS文件中定义的样式。变量和混入也是如此。

在Euruko2012上看到RoyTomeij的演讲后，如果您要管理大量CSS，我决定采用以下方法。

我通常使用这种方法：

1. 将所有现有的.css文件重命名为.scss
2. 从application.scss中删除所有内容

开始将@import指令添加到中

application.scss

。

如果您使用的是twittersbootstrap和自己的一些css表，则必须首先导入bootstrap，因为它具有可重置样式的表。因此，您将添加

@import"bootstrap/bootstrap.scss";

到

application.scss

。

bootstrap.scss文件如下所示：

// CSS Reset@import "reset.scss";// Core@import "variables.scss";@import "mixins.scss";// Grid system and page structure@import "scaffolding.scss";// Styled patterns and elements@import "type.scss";@import "forms.scss";@import "tables.scss";@import "patterns.scss";

您的

application.scss

文件如下所示：

@import "bootstrap/bootstrap.scss";

由于导入的顺序，您现在可以使用变量，该变量随导入之后的

@import"variables.scss";

任何其他

.scss

文件一起加载。因此，它们可以

type.scss

在bootstrap文件夹中使用，也可以在中使用

my_model.css.scss

。

之后，创建一个名为

partials

或的文件夹

modules

。这将是其他大多数文件的位置。您可以将导入添加到

application.scss

文件中，使其看起来像：

@import "bootstrap/bootstrap.scss";@import "partials/*";

现在，如果您花一点点css在首页上设置文章样式。只需创建

partials/_article.scss

，它将添加到已编译

application.css

。由于导入顺序的原因，您还可以在自己的scss文件中使用任何引导混合和变量。

到目前为止，我发现此方法的唯一缺点是，有时您必须强制重新编译partial / *。scss文件，因为Rails不会总是为您完成此 *** 作。