v1.6.0 - generator & cleanup

Generators

mq($media-type: 'only screen', $args...)

Generator allows you to create custom media-queries mixins by passing keywords arguments based on w3c media features specification (make sure you always provide key and value).

It's also a syntactic sugar for the standard media queries syntax (CSS).

Examples:

@include mq($max-width: 1000px) {
  ...
}

// will generate

@media only screen and (max-width: 1000px) {
  ...
}

Creating new mixins (like max-screen) is even easier:

@mixin max-screen($max)
  @include mq($max-width: $max) {
    @content;
  }
}

// usage

@include max-screen(1000px) {
  ...
}

// will generate

@media only screen and (max-width: 1000px) {
  ...
}

Or if you want to change $media-type and other properies:

@mixin custom-device($min, $max)
  @include mq($media-type: 'all', $min-width: $min, $max-width: $max) {
    @content;
  }
}

// usage

@include custom-device(500px, 1000px) {
  ...
}

// will generate

@media all and (min-width: 500px) and (max-width: 1000px) {
  ...
}

Cleanup

The new generator, allowed me to cleanup the main file and removed ~100 LOC.

I also got rid of iphone3 mixin because stats show that there is no point of supporting this device anymore.

Enjoy.