您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Rails中正确的SCSS资产结构

Rails中正确的SCSS资产结构

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

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

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

我通常使用这种方法

开始将@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不会总是为您完成此操作。

CSS 2022/1/1 18:15:45 有423人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶