zębatki - wiele punktów wejścia?

Question

Sprockets official documentation wyraźnie mówi, że:

Sprockets takes any number of source files and preprocesses them 
line-by-line in order to build a `single` concatenation. 

Jestem wielkim fanem zębatkami w szynach, ale tutaj jest problem - mój aplikacja musi obsługiwać wiele układów (przeglądarek stacjonarnych) oraz klientów mobilnych (iPhone, iPad, telefonów z systemem Android itp).

Oba te układy wymagają własnych reguł CSS dotyczących resetowania HTML. Konkatenowane reguły komputerów stacjonarnych & powodują konflikt, ponieważ zastępują one niskie dyrektywy CSS.

Jak mogę to naprawić?

Answer 1

Zakładam, że masz już różne układy dla każdego urządzenia lub grupy urządzeń. Jeśli tak, dołącz do każdego pliku inny plik css najwyższego poziomu, a następnie użyj różnych instrukcji żądań w tych plikach najwyższego poziomu. Jeśli używasz Rails 3.1, nie ma powodu, abyś trzymał wbudowaną linię zawierającą wszystkie pliki css.

Answer 2

Nie jestem pewien, czy koła zębate to obsługują, ale wiem, że jeśli użyjesz klejnotu Jammit. Możesz ustawić różne pakiety, każdy z własnym koktajlem plików JS lub css. na przykład mieć: pakiet workspace na komputery stacjonarne i: pakiet mobilny na telefony komórkowe. To wszystko jest zdefiniowane w pliku konfiguracyjnym YAML i będzie Concat je w kolejności ich listę, która może pomóc plugin zależności poprawne itp

javascripts: 
    workspace: 
    - public/javascripts/vendor/jquery.js 
    - public/javascripts/lib/*.js 
    - public/javascripts/views/**/*.js 
    - app/views/workspace/*.jst 

    mobile: 
    - public/javascripts/vendor/jquery.js 
    - public/javascripts/lib/mobile.js 


stylesheets: 
    common: 
    - public/stylesheets/reset.css 
    - public/stylesheets/widgets/*.css 
    workspace: 
    - public/stylesheets/pages/workspace.css 
    mobile: 
    - public/stylesheets/pages/mobile.css 

Jammit może być warte wygląd do swoich potrzeb

Mam nadzieję, że to pomoże.

Answer 3

Możesz uzyskać wiele plików CSS najwyższego poziomu, tworząc dla nich plik Sprocket. Na przykład, chcesz, aby desktop.css składał się z reset.css, common.css i ie.css i mobile.css i składał się z common.css i ios.css. to masz następujące pliki:

• app/assets/stylesheets/desktop.css
• app/assets/stylesheets/mobile.css
• app/assets/stylesheets/reset.css
• app/assets/stylesheets/common.css
• app/assets/stylesheets/ie.css
• app/assets/stylesheets/ios.css

W desktop.css, to masz następujące elementy:

/* 
*= require reset.css 
*= require common.css 
*= require ie.css 
*/ 

W mobile.css, trzeba wykonać następujące czynności:

/* 
*= require common.css 
*= require ios.css 
*/ 

Następnie w app/views/layouts/desktop.html.erb, byś

<%= stylesheet_link_tag :desktop, :debug => Rails.env.development? %> 

i podobnie dla mobile.html.erb .

Wreszcie trzeba ustawić listę aktywów prekompilowanego w config/environments/production.rb:

config.assets.precompile = %w(desktop.css mobile.css)