Подтвердить что ты не робот

Как загрузить платформу CSS в Rails 3.1?

Я пытаюсь загрузить структуру CSS, Blueprint, в приложение Rails 3.1.

В Rails 3.0+ у меня будет что-то подобное в моих представлениях /layouts/application.html.erb:

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->

Однако Rails 3.1 теперь использует SASS. Каким будет правильный способ загрузки этих файлов CSS Blueprint?

В настоящее время у меня есть директивный каталог в app/assets/stylesheets/

My app/assets/stylesheets/application.css выглядит так:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

Должен ли я что-то делать с application.css, чтобы он загружал необходимые файлы Blueprint? Если да, то как?

Во-вторых, как я могу предоставить какое-то условие для проверки IE8, загрузить файл /ie.css?

EDIT:

Хммм, перезагрузите веб-страницу приложения еще раз. Rails 3.1 содержит файлы Blueprint. Даже если файлы css находятся в папке (в данном случае: app/assets/stylesheets/blueprint.)

Что оставляет меня с двумя вопросами

  • Как применить условие if lt IE 8 с помощью SASS?
  • Как загрузить файл css для формата печати (т.е. <% = stylesheet_link_tag 'план/печать', 'media' = > 'print'% > ) с помощью SASS?
4b9b3361

ОТВЕТЫ

Ответ 1

Даже несмотря на то, что Rails 3.1 (RC) позволяет использовать файлы SASS - это не заставляет его. Файлы в вашем /public/stylesheets все равно будут обслуживаться просто отлично.

Если вы хотите активировать SASS-парсер (и использовать новый фреймворк), переименуйте my_styles.css в my_styles.css.scss и поместите его в папку /app/assets/stylesheets. Затем включите только ваш application.css в свой application.erb.html после раскомментации строк require_self/require_tree.

Для получения дополнительной информации, вот блог, который я снял после быстрого поиска в Google: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

Что касается вещи IE 8. В IE была ошибка, которая не всегда выполняла условия, поэтому попробуйте

<!--[if IE 8.000]><!--> <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> <!--<![endif]-->

его немного хакерства, чтобы попытаться и reset анализатор выполнить правило

Ответ 2

Если кто-то еще задается вопросом, как я это сделал, в конце.

Я удалил

 *= require_tree .

My app/assets/stylesheets/application.css теперь выглядит следующим образом:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it generally better to create a new file per style scope.
 *= require_self
 *= require 'blueprint/screen'
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

И в приложении /views/layouts/application.html.erb у меня есть:

<html>
<head>
  <title><%= yield(:title).present? ? yield(:title) : 'Foobar' %></title>
  <%= favicon_link_tag %>

  <%= stylesheet_link_tag    'application' %>
  <%= javascript_include_tag 'application' %>

  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->
...

Надеюсь, это поможет кому-то.

Ответ 3

В этом блоге есть решение, которое, я думаю, вы ищете (как и я).

Не помещайте blueprint в app/assets, потому что он будет втянут в require_tree. Не ставьте его на public, потому что это не то место, куда идут активы. Поместите его в vendor/assets/stylesheets, затем включите их в application.html.erb перед вашим собственным application.css следующим образом:

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

Ответ 4

Другой способ делать вещи:

Сделайте приложение/активы/таблицы стилей /custom.css

Затем измените custom.css, чтобы использовать необходимые файлы:

/*
 *= require_self
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

Наконец, измените тег ссылки в макете (обязательно удалите таблицу стилей приложения)

= stylesheet_link_tag    "custom"

Затем вы можете добавить любую другую таблицу стилей вручную (например, "ie" specific) и другие группы таблиц стилей (например, для загрузки всех файлов чертежей...)

Вам также может понадобиться (в вашем production.rb)

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)

Ответ 5

Здесь, как использовать жемчужину "blueprint-rails" в Rails 3.1

Добавить "жемчужина":

/Gemfile

gem 'blueprint-rails', , '~> 0.1.2'

Добавьте общие общие файлы в манифест, чтобы они были предварительно скомпилированы в application.css:

/app/assets/stylesheets/application.css

 /*
  *= require 'blueprint'
  */

Добавьте файл application.css, который будет содержать общие файлы чертежей. Также добавьте print.css и ie.css условно:

/Views/layouts/application.html.erb

<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
  <%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->

Из-за условий print.css и ie.css необходимы как отдельные файлы вне application.css(и не включены по умолчанию в require 'blueprint). Поэтому нам нужно добавить их в:

/Configuration/envoirnments/production.rb

# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']

Затем запустите:

bundle exec rake assets:precompile

Ответ 6

Абсолютно согласен с вашим решением, не думайте, что "require_tree" - хорошая практика в application.css, он будет включать в себя что угодно, по-видимому, это слишком агрессивно. Я немного боролся, наконец, я выбрал точно такое же решение, использую приложение, чтобы включить эти стили эшафотов, а затем использовать теги HTML, чтобы включить некоторые дополнительные и условные стили. Спасибо.

Ответ 7

Конечный результат переведенных файлов SASS - это фактически файл css, поэтому он не должен изменять способ добавления таблиц стилей.

Кроме того, только потому, что цвет SASS включен, это не означает, что вы не можете использовать простые файлы css для ванилин одновременно. Поэтому у вас не должно быть проблем, включая файлы css проекта.

Однако, если вы хотите перейти на чисто SASS, я рекомендую проверить драгоценный камень компаса, который имеет хорошую поддержку плана:

http://compass-style.org/

Он также содержит поддержку конкретных таблиц стилей и макросов.