所以,我有一个app/assets/stylesheets/目录 struct ,看起来像这样:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

在每个目录中,都有多个sass部分(通常是*.css.scss,但也有一个或两个*.css.scss.erb).

我可能会假设很多,但rails应该自动编译这些目录中的所有文件,因为应用程序中有*= require_tree .个.css,对吗?

最近,我try 通过删除所有 colored颜色 变量并将它们放入根app/assets/stylesheets文件夹(_color s.css.scss)的一个文件中来重新构建这些文件.然后,我在根app/assets/stylesheets文件夹中创建了一个名为master.css.scss的文件,如下所示:

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

我不太明白rails是如何处理assets资源 编译顺序的,但这显然不利于我.似乎没有一个文件意识到它们有任何变量或混合被导入,所以它会抛出错误,我无法编译.

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

变量$dialog_divider_color以_ colored颜色 明确定义.css.scss和_master.css.scss正在导入 colored颜色 和我所有的混音.但显然rails没有收到备忘录.

有没有办法修复这些错误,或者我需要将所有变量定义放回每个单独的文件,以及所有mixin导入?

不幸的是,this guy似乎认为这是不可能的,但我希望他是错的.我们非常感谢您的任何 idea .

推荐答案

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

例如,假设您有一个normalize.css页的页面,以获得默认外观,而不是所有可怕的不同浏览器实现.这应该是浏览器加载的第一个文件.如果只是在css导入的某个地方随机包含此工作表,那么它不仅会覆盖浏览器默认样式,还会覆盖之前加载的所有css文件中定义的任何样式.变量和混合变量也是如此.

在Euruko2012上看了Roy Tomeij人的演讲后,如果你有很多CSS要管理,我决定采用下面的方法.

我通常使用这种方法:

  1. 将所有现有.css文件重命名为.scss
  2. 从应用程序中删除所有内容.scss

开始将@import指令添加到application.scss.

如果您使用的是twitters bootstrap和您自己的几个CSS表,则必须首先导入bootstrap,因为它有一个用于重置样式的表. 所以你在application.scss的基础上加@import "bootstrap/bootstrap.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";

由于导入的顺序,您现在可以使用变量,在之后导入的任何其他.scss文件中加载@import "variables.scss";.所以它们可以在type.scss中的bootstrap文件夹中使用,也可以在my_model.css.scss中使用.

之后,创建名为partialsmodules的文件夹.这将是存放大多数其他文件的地方.您只需将导入添加到application.scss文件,使其看起来如下所示:

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

现在,如果你制作了一些CSS来设计你主页上的一篇文章的样式.只需创建partials/_article.scss,它将被添加到编译后的application.css中.由于导入顺序的原因,您还可以在自己的SCSS文件中使用任何 bootstrap 、混合和变量.

到目前为止,我发现这种方法的唯一缺点是,有时必须强制重新编译部分/*.scss文件,因为rails并不总是为您这样做.

Css相关问答推荐

关于React.js的CSS Select 器

如何提高数学输出的质量?

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式?

如何使用在另一个层定义块中定义的sass层作用域变量

应用填充时边框无法正常工作

使元素在顶部和中心都有粘性

Tailwind CSS 隐藏和可见

努力将 CSS 样式应用于 Elm 应用程序

如何在父叠加层之上呈现子子

网格在行方向上的大小不正确

如何将 CSS 样式应用于 Quarto 输出

Tailwind:如何设置网格的自动填充?

如何仅包装左侧内容

如何使用rvest中的 node 和类提取网页数据

带有图像的 CSS 网格在 Firefox 中表现不同

CSS nth-child 表示大于和小于

如何更改 Angular Material 上 mat-icon 的大小?

如何强制显示垂直滚动条?

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

通过 Bootstrap4 对列进行排序