2012-12-28 76 views
1

我有一个网站的HTML/CSS版本(建立在Bootstrap上),我正在翻译成一个Rails 3应用程序。如何找出哪种风格重写了另一种风格?

资产管道让我疯狂。

由于gem生成的bootstrap_and_overrides.css.scss文件,它在我的Rails应用中显示的方式和普通的HTML文件之间存在冲突。

一个这样的事情似乎是一些字体样式的重写。例如,

这就是1 h3应该如何看。

HTML style

这是怎么同h3在我的Rails应用程序正在呈现。

Rails style

因此,与正在显示页面的方式,问题是在这些特定的风格....但我不明白,为什么这种风格被覆盖。

我很想知道为什么我会去找出为什么要这样做的任何提示。

此外,有一件事情是在我截图的Rails版本中的media=all。不确定这是否会导致这些问题。

编辑1

由于@coreyward指出,它可能已被它用我的样式表初始化的顺序。在我的原始HTML/CSS文件中,Bootstrap & Font-Awesome相关的css在main.css之前声明。但在Rails中,情况恰恰相反。

鉴于我在application.html.erb初始声明如下所示:

<%= stylesheet_link_tag "application", :media => "all" %> 

如何扭转这些东西初始化的顺序?

编辑2

我用这bootstrap-sass gem,而问题是,它不希望你使用//=require指令 - 所以我不能只是重新安排在CSS中体现的顺序文件。或者说,我不知道该怎么做。

想法?

+0

资产管道根本不应该归咎于此,但是如果您没有按期望的顺序包含可能会产生意想不到的效果的资产。您应该重新了解样式表在层叠样式表中的级联方式。 – coreyward

+0

Hrmm ....有趣的一点...我肯定会弄翻翻译。但问题是我只有1个样式表 - “application.css.scss”,然后我包含Bootstrap样式表。编辑1:顺便说一句,你可能是对的。我注意到,在普通的HTML版本中,'main.css'在引导相关的样式表之后被调用。在Rails中,它恰恰相反。我该如何解决这个问题,因为我已经完成了:'<%= stylesheet_link_tag“application”,:media =>“all”%>'在我的布局中? – marcamillion

+0

所有资产管道正在进行连接和缩小。如果您将其他人视为特定的选择器,他们将会覆盖任何相同的属性。这就是为什么在定义自己的样式之前包含Bootstrap的原因。 – coreyward

回答

0

我从bootstrap-sass切换到twitter-bootstrap-rails,它允许我指定require指令的顺序。

在玩弄指令的正确顺序后,我终于找到了一个似乎已经解决了我的问题。

1

media=all只是意味着包括屏幕和打印。如果你不关心当有人打印网站时网站的外观,那么你可以做media="screen"。至于为什么一些这样的风格被这样重写。确保在您的资产管道中,您不包含require_tree .的scaffold.css。这通常会吸引很多人。此外,您不必包含整个bootstrap_and_overrides文件。如果你只是想要那部分,你可以只需= require twitter/bootstrap/bootstrap。希望让你接近。

+0

我的样式表文件夹中没有'scaffold.css'。过去我绊倒了我,所以很久以前我就摆脱了它。这个问题与清单文件中的顺序有关。问题还在于我使用的Bootstrap gem(bootstrap-sass)不喜欢'// require指令。 – marcamillion

+0

更新了问题。 – marcamillion