Are asterisks multiple entry points?

Question

Sprockets' official documentation clearly states that:

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

I am a big fan of stars in Rails, but here's the problem - my application must support multiple layouts (desktop browsers) and mobile clients (iphone, ipad, android phones, etc.).

Both of these layouts require their own CSS reset CSS rules. Concatenated desktop and mobile device file reset rules can cause a conflict because they override low-level CSS directives.

How can i fix this?

Answer 1

You can get multiple top-level CSS files by creating a Sprocket file for each. For example, suppose you want desktop.css consist of reset.css , common.css and ie.css and mobile.css , consisting of common.css and ios.css . You will have the following files:

• 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

In desktop.css you will have the following:

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

In mobile.css you will have the following:

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

Then, in app/views/layouts/desktop.html.erb , you would do

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

and similarly for mobile.html.erb .

Finally, you need to set the list of precompiled assets in config/environments/production.rb :

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

Answer 2

I'm not sure if sprockets support this, but I know that if you use a Jammit gem . You can configure various packages, each of which has its own cocktail of your JS or css files. for example, they have: a work package for the desktop and and: a mobile package for mobile phones. All this is defined in the config yaml file, and it will concatenate them in the order in which you list them, which can help to obtain the correct plug-in dependencies, etc.

 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 may be worth a look at your needs.

Hope this helps.

Answer 3

I assume that you already have different layouts for each device or device group. If so, just add another top-level css file in each, and then enter different requirements in these top-level files. If you are using Rails 3.1, there is no reason why you should keep an inline line that includes all css files.