[英]Blueprint CSS, Ruby on Rails 3.1 and “CSS conditions”
I'm migrating my application to Rails 3.1 and I use the blueprint css framework .我正在将我的应用程序迁移到 Rails 3.1,并使用蓝图 css 框架。 As seen in the setup instructions at blueprint's github page there's is a condition that needs to be true for the ie.css file to be included.正如在蓝图的 github 页面的设置说明中看到的那样,要包含 ie.css 文件需要满足一个条件。
In rails 3.1 we place our stylesheet files (either.css or.scss) in app/assets/stylesheets.在 rails 3.1 中,我们将样式表文件(.css 或 .scss)放在 app/assets/stylesheets 中。 Application.css contains these two important lines: Application.css 包含这两个重要的行:
/*
*= require_self
*= require_tree .
*/
Which loads every.css or.scss file in the app/assets/stylesheets directory.它会加载 app/assets/stylesheets 目录中的每个 .css 或 .scss 文件。 This is what the setup instructions tells us to do:这是设置说明告诉我们要做的:
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
How do I 'create' a condition like that in 3.1?如何在 3.1 中“创建”这样的条件?
Try using three separate files to require all the relevant files:尝试使用三个单独的文件来要求所有相关文件:
/*
* Application-Screen.css
*
*= require_self
*= require_tree ./screen
*/
/*
* Application-Print.css
*
*= require_self
*= require_tree ./print
*/
/*
* Application-IE.css
*
*= require_self
*= require_tree ./ie
*/
The tree would look like:树看起来像:
app/stylesheets/
+---screen/
| +--- Your actual stylesheets, along with Blueprint's
+---print/
| +--- Your print stylesheets, along with Blueprint's
+---ie/
| +--- IE compatibility stylesheets
+---Application-Screen.css
+---Application-Print.css
+---Application-IE.css
Then you would probably be able to do:那么你可能可以这样做:
<link rel="stylesheet" href="Application-Screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="Application-Print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="Application-IE.css" type="text/css" media="screen, projection">
<![endif]-->
If this does not work, please check my other answer.如果这不起作用,请检查我的其他答案。
I discourage you to mess with the blueprint directory.我不鼓励你弄乱蓝图目录。 You should import it as is.您应该按原样导入它。 Avoid importing the blueprint css files into a different tree or into separate directories (it may break relative paths).避免将蓝图 css 文件导入到不同的树或单独的目录中(它可能会破坏相对路径)。
You blueprint folder path should look like app/assets/stylesheets/blueprint/ and you should import blueprint styles before your application styles (so you can override any undesiderable style imported from blueprint).您的蓝图文件夹路径应该类似于app/assets/stylesheets/blueprint/并且您应该在应用程序 styles 之前导入蓝图 styles(这样您就可以覆盖从蓝图导入的任何不受欢迎的样式)。
The following solution is based on Matheus Moreira's answer and is concerned with these issues:以下解决方案基于Matheus Moreira 的回答并关注这些问题:
/*
* application.css
* General styles for the application
*= require ./blueprint/screen
*= require_self
*/
/*
* application-print.css
* Styles for print media
*= require ./blueprint/print
*= require_self
*/
/*
* application-ie.css
* Styles if lt IE 8
*= require ./blueprint/ie
*= require_self
*/
The files tree should look like:文件树应如下所示:
app/assets/stylesheets/application.css
app/assets/stylesheets/application-ie.css
app/assets/stylesheets/application-print.css
app/assets/stylesheets/blueprint/
Your application layout should import the stylesheets as:您的应用程序布局应将样式表导入为:
<%= stylesheet_link_tag 'application', media: 'screen, projection' %>
<%= stylesheet_link_tag 'application-print', media: 'print' %>
<!--[if lt IE 8]>
<%= stylesheet_link_tag 'application-ie', media: 'screen, projection' %>
<![endif]-->
You should also check this rails cast by Ryan Bates about Sass basics in Rails 3.1: http://railscasts.com/episodes/268-sass-basics您还应该检查 Ryan Bates 关于 Rails 3.1 中Sass 基础知识的此导轨: http://railscasts.com/episodes/268-sass-basics
FYI供参考
I use this to create blueprint in rails 3.1我用它在 Rails 3.1 中创建蓝图
blueprint folder path (try the dry run before):蓝图文件夹路径(之前尝试试运行):
compass init rails . --using blueprint --dry-run --sass-dir app/assets/stylesheets --image-dir app/assets/images
Just save you the time spent to move stuffs under assets只需节省您在资产下移动东西所花费的时间
Alternatively, you may place Blueprint's stylesheets in public/stylesheets
and you can use them exactly as you would in previous versions of Rails:或者,您可以将 Blueprint 的样式表放在public/stylesheets
中,您可以像在以前的 Rails 版本中一样使用它们:
stylesheet_link_tag '/stylesheets/blueprint/screen', media: 'screen, projection'
stylesheet_link_tag '/stylesheets/blueprint/print', media: 'print'
<!--[if lt IE 8]>
stylesheet_link_tag '/stylesheets/blueprint/ie', media: 'screen, projection'
<![endif]-->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.