startinggravity/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<!-- We have to simulate using Modernizr classes in the <html> tag  -->
<div class="svg">
  <div class="drupal">
    <div class="logo"></div>
  </div>
</div>

## SassMeister-input.scss
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

// Modernizr mixin
//
// Table of contents:
// 1. Modernizr mixin
//   1.1 Generate placholder name and selectors
//   1.2 Define placholder and print @content
//   1.3 Define feature selector and extend the placeholder
// 2. Aliases
//   2.1 Yep alias
//   2.2 Nope alias
//
// Usage:
// .my selector {
//   @include yep($features) { ... }
//   @include nope($feautres) { ... }
// }
//
// =============================================================================

// =============================================================================
// 1. Modernizr mixin
// =============================================================================

@mixin modernizr($features, $supports) {

  $everything-okay: true;

  // Use the 'no-' prefix if checking for unsuported features (e.g. `.no-translate3d`)
  $prefix: if($supports, '', 'no-');

  // Features selector
  // a) create a string if checking for supported features. We'll concatenate class names later on (e.g. `.translate3d.opacity selector`)
  // b) create a list if checking for unsuported features. We'll append the class names later on (e.g. `.no-js selector, .no-translate3d selector`)
  $selector: if($supports, '', (unquote('.no-js')));

  // The placeholder (e.g. `%yep-translate3d` or `%nope-opacity`)
  $placeholder: if($supports, '%yep', '%nope');


  // 1.1 Generate placeholder and selectors
  // =====================================

  @each $feature in $features {

    // Making sure $feature is a string
    @if type-of($feature) != string {

      $everything-okay: false;
      @warn '`#{$feature} is not a string for `modernizr`';

    } @else {

      // Add feature name to the placeholder string (e.g. '%yep' + '-' + 'translate3d' or '%nope' + '-' + 'translate3d')
      $placeholder: $placeholder + '-' + $feature;

      // Define the new selector string (e.g. `.translate3d` or `.no-translate3d`)
      $new-selector: #{'.' + $prefix + $feature};

      // Append the new selector
      // a) to the string if yep (e.g. `.translate3d.opacity`)
      // b) to the list if nope (e.g. `.no-translate3d, .no-opacity`)
      $selector: if($supports, $selector + $new-selector, append($selector, $new-selector, comma));

    }
  }

  @if $everything-okay == true {

    // 1.2 Define the placholder and print @content
    // =====================================

    #{$placeholder} & {
      @content;
    }


    // 1.3 Define feature selector(s) and extend the placeholder
    // =====================================

    @at-root #{$selector} {
      @extend #{$placeholder};
    }

  }
}

// =============================================================================
// 2. Aliases
// =============================================================================

  // 2.1 Yep alias
  // =====================================

  @mixin yep($features) {
    @include modernizr($features, $supports: true) {
      @content;
    }
  }


  // 2.2 Nope alias
  // =====================================

  @mixin nope($features) {
    @include modernizr($features, $supports: false) {
      @content;
    }
  }

.logo {
  display: block;
  height: 181px;
  width: 158px;
}

.drupal {
  @include yep(svg) {
    .logo {
      background: transparent url(https://www.drupal.org/files/druplicon.vector.svg) no-repeat;
      background-size: 158px 181px;
      &:before {
        content: "SVG";
      }
    }
  }
  @include nope(svg) {
    .logo {
      background: transparent url(https://www.drupal.org/files/druplicon.large_.png) no-repeat;
      background-size: 158px 181px;
      &:before {
        content: "No SVG";
      }
    }
  }
 }

## SassMeister-output.css
.logo {
  display: block;
  height: 181px;
  width: 158px;
}

.svg .drupal .logo {
  background: transparent url(https://www.drupal.org/files/druplicon.vector.svg) no-repeat;
  background-size: 158px 181px;
}
.svg .drupal .logo:before {
  content: "SVG";
}
.no-js .drupal .logo, .no-svg .drupal .logo {
  background: transparent url(https://www.drupal.org/files/druplicon.large_.png) no-repeat;
  background-size: 158px 181px;
}
.no-js .drupal .logo:before, .no-svg .drupal .logo:before {
  content: "No SVG";
}

## SassMeister-rendered.html
<!-- We have to simulate using Modernizr classes in the <html> tag  -->
<div class="svg">
  <div class="drupal">
    <div class="logo"></div>
  </div>
</div>
	<!-- We have to simulate using Modernizr classes in the <html> tag -->
	<div class="svg">
	<div class="drupal">
	<div class="logo"></div>
	</div>
	</div>
	// ----
	// Sass (v3.3.10)
	// Compass (v1.0.0.alpha.20)
	// ----

	// Modernizr mixin
	//
	// Table of contents:
	// 1. Modernizr mixin
	// 1.1 Generate placholder name and selectors
	// 1.2 Define placholder and print @content
	// 1.3 Define feature selector and extend the placeholder
	// 2. Aliases
	// 2.1 Yep alias
	// 2.2 Nope alias
	//
	// Usage:
	// .my selector {
	// @include yep($features) { ... }
	// @include nope($feautres) { ... }
	// }
	//
	// =============================================================================

	// =============================================================================
	// 1. Modernizr mixin
	// =============================================================================

	@mixin modernizr($features, $supports) {

	$everything-okay: true;

	// Use the 'no-' prefix if checking for unsuported features (e.g. `.no-translate3d`)
	$prefix: if($supports, '', 'no-');

	// Features selector
	// a) create a string if checking for supported features. We'll concatenate class names later on (e.g. `.translate3d.opacity selector`)
	// b) create a list if checking for unsuported features. We'll append the class names later on (e.g. `.no-js selector, .no-translate3d selector`)
	$selector: if($supports, '', (unquote('.no-js')));

	// The placeholder (e.g. `%yep-translate3d` or `%nope-opacity`)
	$placeholder: if($supports, '%yep', '%nope');


	// 1.1 Generate placeholder and selectors
	// =====================================

	@each $feature in $features {

	// Making sure $feature is a string
	@if type-of($feature) != string {

	$everything-okay: false;
	@warn '`#{$feature} is not a string for `modernizr`';

	} @else {

	// Add feature name to the placeholder string (e.g. '%yep' + '-' + 'translate3d' or '%nope' + '-' + 'translate3d')
	$placeholder: $placeholder + '-' + $feature;

	// Define the new selector string (e.g. `.translate3d` or `.no-translate3d`)
	$new-selector: #{'.' + $prefix + $feature};

	// Append the new selector
	// a) to the string if yep (e.g. `.translate3d.opacity`)
	// b) to the list if nope (e.g. `.no-translate3d, .no-opacity`)
	$selector: if($supports, $selector + $new-selector, append($selector, $new-selector, comma));

	}
	}

	@if $everything-okay == true {

	// 1.2 Define the placholder and print @content
	// =====================================

	#{$placeholder} & {
	@content;
	}


	// 1.3 Define feature selector(s) and extend the placeholder
	// =====================================

	@at-root #{$selector} {
	@extend #{$placeholder};
	}

	}
	}

	// =============================================================================
	// 2. Aliases
	// =============================================================================

	// 2.1 Yep alias
	// =====================================

	@mixin yep($features) {
	@include modernizr($features, $supports: true) {
	@content;
	}
	}


	// 2.2 Nope alias
	// =====================================

	@mixin nope($features) {
	@include modernizr($features, $supports: false) {
	@content;
	}
	}

	.logo {
	display: block;
	height: 181px;
	width: 158px;
	}

	.drupal {
	@include yep(svg) {
	.logo {
	background: transparent url(https://www.drupal.org/files/druplicon.vector.svg) no-repeat;
	background-size: 158px 181px;
	&:before {
	content: "SVG";
	}
	}
	}
	@include nope(svg) {
	.logo {
	background: transparent url(https://www.drupal.org/files/druplicon.large_.png) no-repeat;
	background-size: 158px 181px;
	&:before {
	content: "No SVG";
	}
	}
	}
	}