Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
spec
.gitignore
CHANGELOG.md
Gemfile
LICENSE.txt
README.md
Rakefile
sass-media_query_combiner.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

You can’t perform that action at this time.