Używanie potoku zasobów rails 3.1 do warunkowego użycia pewnych css

Jestem w trakcie budowania mojej pierwszej aplikacji solo Rails przy użyciu Rails 3.1.rc5. Mój problem polega na tym, że chcę, aby moja strona warunkowo renderowała Różne Pliki CSS. Używam Blueprint CSS i staram się, aby sprockets/rails renderowali screen.css przez większość czasu, print.css Tylko podczas drukowania, a ie.css tylko wtedy, gdy strona jest dostępna z Internet Explorera.

Niestety, domyślne polecenie *= require_tree w manifeście application.css zawiera wszystko w katalogu assets/stylesheets i powoduje nieprzyjemna mieszanka CSS. Moje obecne obejście jest rodzajem metody brute-force, w której określam wszystko indywidualnie:

W aplikacji.css: 

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

In my stylesheets partial (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 specjalnie ładne. Zrobiłem kilka godzin poszukiwań, aby nawet dostać się tak daleko, ale mam nadzieję, że jest jakiś łatwiejszy sposób, aby to zrobić, że po prostu przegapiłem. Gdybym mógł nawet wybiórczo renderować niektóre katalogi (bez włączania podkatalogów) to zrobiłbym cały proces jest o wiele mniej sztywny. Dzięki!
Author: JakeGould, 2011-08-20
Source

3 answers

Odkryłem sposób, aby uczynić go mniej sztywnym i przyszłościowym, nadal używając potoku zasobów, ale mając pogrupowane arkusze stylów. Nie jest to dużo prostsze niż rozwiązanie, ale to rozwiązanie pozwala na 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 rozdzielić rzeczy. Najpierw musisz uporządkować swój app/assets/stylesheets folder: 

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 manifesty pliki: 

/**
 * 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 aktualizujesz 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 config / environments / production.rb: 

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

Aktualizacja:

Jak zauważył Max, jeśli podążasz za tą strukturą, musisz pamiętać o odniesieniach do obrazów. Masz kilka opcji:

  1. Przenieś obrazy do tego samego wzorca
    • zauważ, że to działa tylko wtedy, gdy obrazy nie są wszystkie shared
    • spodziewam się, że będzie to nie-starter dla większości, ponieważ komplikuje to zbyt wiele
  2. zakwalifikowanie ścieżki obrazu:
    • background: url('/assets/image.png');
  3. użyj pomocnika SASS:
    • background: image-url('image.png');
 223
Author: gcastro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-04 05:06:58

Natknąłem się na ten problem dzisiaj.

Skończyło się umieszczeniem wszystkich arkuszy stylów specyficznych dla IE w lib/assets / stylesheets i utworzeniem jednego pliku manifestu dla każdej wersji IE. Następnie w aplikacji.rb dodaj je do listy rzeczy do precompile : 

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

I w swoich układach, warunkowo Dołącz te pliki manifest i jesteś gotowy do pracy!

 10
Author: Anthony Alberto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-18 14:35:11

To całkiem zgrabny sposób. Używam klas warunkowych na html lub modernizr. Zobacz ten artykuł, aby uzyskać dobrą reprezentację na temat tego,co robi co. modernizr-vs-conditional-classes-on-html

 2
Author: mrmonroe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-25 19:02:02