Używanie potoku zasobów Rails 3.1 do warunkowego używania określonego CSS

Jestem w trakcie tworzenia mojej pierwszej solowej aplikacji Rails przy użyciu Rails 3.1.rc5. Mój problem polega na tym, że chcę, aby moja witryna warunkowo renderowała różne pliki CSS. Używam Blueprint CSS i staram się renderować koła zębate / szyny przez screen.csswiększość czasu, print.csstylko podczas drukowania i ie.csstylko wtedy, gdy strona jest otwierana z przeglądarki Internet Explorer.

Niestety, domyślne *= require_treepolecenie w application.cssmanifeście zawiera wszystko w assets/stylesheetskatalogu i powoduje nieprzyjemne pomieszanie CSS. Moje obecne obejście to rodzaj metody brutalnej siły, w której określam wszystko indywidualnie:

W application.css:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

W moich arkuszach stylów częściowe (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

To działa, ale nie jest szczególnie ładne. Poświęciłem kilka godzin na szukanie, aby dojść tak daleko, ale mam nadzieję, że jest na to jakiś łatwiejszy sposób, który właśnie przegapiłem. Gdybym mógł nawet selektywnie renderować niektóre katalogi (bez włączania podkatalogów), cały proces byłby znacznie mniej sztywny.

Dzięki!

Odkryłem sposób, aby uczynić go mniej sztywnym i odpornym na przyszłość, nadal korzystając z potoku aktywów, ale zgrupując arkusze stylów. Nie jest to dużo prostsze niż twoje rozwiązanie, ale to rozwiązanie umożliwia automatyczne dodawanie nowych arkuszy stylów bez konieczności ponownej edycji całej struktury.

To, co chcesz zrobić, to użyć oddzielnych plików manifestu, aby rozbić rzeczy. Najpierw musisz ponownie uporządkować swój app/assets/stylesheetsfolder:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Następnie edytujesz trzy pliki manifestu:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

Następnie zaktualizuj plik układu aplikacji:

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

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

Na koniec nie zapomnij dołączyć tych nowych plików manifestu do swojego config / environment / production.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Aktualizacja:

Jak zauważył Max, jeśli przestrzegasz tej struktury, musisz pamiętać o odniesieniach do obrazów. Masz kilka możliwości:

1. Przenieś obrazy, aby postępować zgodnie z tym samym wzorem
   • Pamiętaj, że działa to tylko wtedy, gdy nie wszystkie obrazy są udostępniane
   • Spodziewam się, że dla większości nie będzie to starter, ponieważ zbytnio komplikuje sprawę
2. Kwalifikuj ścieżkę obrazu:
   • background: url('/assets/image.png');
3. Użyj pomocnika SASS:
   • background: image-url('image.png');

Dzisiaj napotkałem ten problem.

Skończyło się na umieszczeniu wszystkich arkuszy stylów specyficznych dla IE w lib / asset / stylesheets i utworzeniu jednego pliku manifestu dla każdej wersji IE. Następnie w application.rb dodaj je do listy rzeczy do prekompilacji:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

Uwzględnij warunkowo te pliki manifestu w swoich układach i gotowe!

To całkiem fajny sposób na zrobienie tego. Używam klas warunkowych w html lub modernizr. Zobacz ten artykuł, aby zobaczyć, co robi. modernizr-vs-conditional-classes-on-html