pierreburel

This gist demonstrates how to use Compass magic sprites in combination with HiDPI.

See how it's done

Credits: Icons © Adam Whitcroft

Oh and you may check Compass HDPI

pierreburel

<h1>Test</h1>

pierreburel

<h1>Test</h1>

pierreburel

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
    gulp.src('./*.sass')
        .pipe(sass({indentedSyntax: true}))
        .pipe(gulp.dest('./'));
});

pierreburel

<div class="svg"></div>

pierreburel

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

$resolution-default: 2 !default;
$resolution-presets: (
  ldpi: 75%,
  mdpi: 100%,
  hdpi: 150%,

pierreburel

// ----
// libsass (v3.2.5)
// ----

@each $p, $property in (b: border, p: padding, m: margin) {
  @each $v, $value in (n: 0, s: 10px, m: 20px, l: 30px) {
    @each $d, $direction in (t: top, b: bottom) {
      .#{$p}#{$d}#{$v} {
        #{$property}-#{$direction}: #{$value};
      }

pierreburel

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

$resolution-default: 2 !default;
$resolution-presets: (
  "ldpi" 75%,
  "mdpi" 100%,
  "hdpi" 150%,

pierreburel

<h1>Test</h1>

pierreburel

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

/// Map of breakpoints
/// @type Map
$breakpoints: (
  'small': '(min-width: 860px)',
  'medium': '(min-width: 1000px)',