Blueprint CSS, Ruby on Rails 3.1 и «Условия CSS»

Question

Я перевожу свое приложение на Rails 3.1 и использую blueprint css framework . Как видно из инструкций по настройке на странице github проекта , для включения файла ie.css необходимо условие, которое должно выполняться.

В rails 3.1 мы помещаем наши файлы таблиц стилей (.css или .scss) в app / assets / stylesheets. Application.css содержит две важные строки:

/*
 *= require_self
 *= require_tree . 
*/

Который загружает каждый файл .css или .scss в каталог app / assets / stylesheets. Это то, что инструкции по установке говорят нам сделать:

<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]-->

Как мне «создать» такое условие в 3.1?

Answer 1

Попробуйте использовать три отдельных файла для запроса всех соответствующих файлов:

/*
 * Application-Screen.css
 *
 *= require_self
 *= require_tree ./screen
 */

/*
 * Application-Print.css
 *
 *= require_self
 *= require_tree ./print
 */

/*
 * Application-IE.css
 *
 *= require_self
 *= require_tree ./ie
 */

Дерево будет выглядеть так:

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

Тогда вы, вероятно, сможете сделать:

<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]-->

Если это не сработает, пожалуйста, проверьте мой другой ответ.

Answer 2

FYI

Я использую это для создания чертежа в рельсах 3.1

Путь к папке чертежа (попробуйте пробный прогон раньше):

compass init rails  . --using blueprint --dry-run --sass-dir app/assets/stylesheets --image-dir app/assets/images

Просто сэкономьте времяпотрачено на перемещение вещей под активы

Answer 3

Я не рекомендую вам возиться с каталогом чертежей. Вы должны импортировать его как есть. Избегайте импорта файлов чертежей CSS в другое дерево или в отдельные каталоги (это может нарушить относительные пути).

Ваш путь к папке с чертежами должен выглядеть следующим образом: app / assets / stylesheets / blueprint / , и вам следует импортировать стили чертежей перед стилями приложения (чтобы можно было переопределить любой нежелательный стиль, импортированный из план).

---

Следующее решение основано на ответе Матеуса Морейры и касается следующих вопросов:

/*
 * 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
*/

Дерево файлов должно выглядеть так:

app/assets/stylesheets/application.css
app/assets/stylesheets/application-ie.css
app/assets/stylesheets/application-print.css
app/assets/stylesheets/blueprint/

Макет вашего приложения должен импортировать таблицы стилей как:

<%= 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]-->

Вам также следует проверить эти рельсы, отлитые Райаном Бейтсом, о Основах Sass в Rails 3.1: http://railscasts.com/episodes/268-sass-basics

Answer 4

Кроме того, вы можете поместить таблицы стилей 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]-->