No commit activity in last 3 years
No release in over 3 years
Sprockets bundle processor to combine all like media queries
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

>= 0
>= 0

Runtime

 Project Readme

Sprockets::MediaQueryCombiner

Gem Version Build Status Coverage Status Code Climate

Combines all matching media queries while compiling your assets with sprockets/Rails asset pipeline.

If you're not using Rails 3.1+ or Sprockets, you should use sass-media_query_combiner

For example:

h3 {
  color: orange
}
@media (max-width: 480px) {
  h1 {
    color: red
  }
}
@media (max-width: 980px) {
  h4 {
    color: black
  }
}
@media (max-width: 480px) {
  h2 {
    color: blue
  }
}

Would end up as (except the whitespace won't be so clean):

h3 {
  color: orange
}
@media (max-width: 480px) {
  h1 {
    color: red
  }
  h2 {
    color: blue
  }
}
@media (max-width: 980px) {
  h4 {
    color: black
  }
}

Note

This will change the order of your css, so be aware of that. All the @media queries will end up at the end of each css file in the order that they are first encountered. In other words, if you're relying on only using min-width or only using max-width in a specific order you'll want to be sure define your media queries in the right order up front before you use them randomly throughout your file.

Installation

Requires Ruby >= 1.9.2.

Add this line to your application's Gemfile:

gem 'sprockets-media_query_combiner'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sprockets-media_query_combiner

Usage

If you're using Rails you're done. Nothing more to do.

If you're using Sprockets on its own you'll need to register the bundle processor:

register_bundle_processor 'text/css', Sprockets::MediaQueryCombiner::Processor

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Bitdeli Badge