Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Ruby
branch: master
Failed to load latest commit information.
lib Up version to 0.0.7
spec Support sourcemaps and file output
.gitignore Initial Commit
CHANGELOG.md fix date
Gemfile Add coveralls
LICENSE.txt Initial Commit
README.md Add mqpacker note
Rakefile add rake support
sass-media_query_combiner.gemspec Add licence to gemspec

README.md

Sass::MediaQueryCombiner

Gem Version Build Status Coverage Status Code Climate

Combines all matching media queries while compiling your Sass.

If you're using Rails 3.1+ or Sprockets, you should use sprockets-media_query_combiner.

For node pipelines try node-css-mqpacker.

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 'sass-media_query_combiner'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sass-media_query_combiner

Usage

In your config.rb

require 'sass-media_query_combiner'

If you're using sass --watch do:

sass --watch -r sass-media_query_combiner

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

Something went wrong with that request. Please try again.