Generated by SassMeister.com.

placeholder_media_query_on_steroid.scss

// ----
// Sass (v3.3.14)
// Compass (vundefined)
// ----

// -----------------------------------------------------------------------------
// Introduction
// -----------------------------------------------------------------------------

// Here is hacky and experimental solution for cross-scopes extends
// ---
// It works by generating one placeholder per breakpoint
// instead of a single placeholder at root level as you'd normally do
// (in a fully automatic way of course)
// ---
// The API is quite simple.
// To create a placeholder, instead of doing:
//   %my-awesome-placeholder {}
// You would do:
//   @include placeholder(my-awesome-placeholder)
// ---
// To extend an existing placeholder, instead of doing:
//   @extend %my-awesome-placeholder
// You would do:
//   @include _(my-awesome-placeholder)
// ---

// -----------------------------------------------------------------------------
// Set up
// -----------------------------------------------------------------------------

// A list of breakpoints
// When generating a placeholder,
// The same placeholder will be generated in every breakpoint

// -----------------------------------------------------------------------------
// Core
// -----------------------------------------------------------------------------

// Caching current breakpoint
// Not meant to be manually edited
$default-breakpoint: root;
$current-breakpoint: $default-breakpoint;

// Caching existing placeholders
// Not meant to be manually edited
$placeholders: ();

//Breakpoints list
$breakpoints-list: (
  // "thumb-small":            "screen and (max-width: 320px)",
  // "thumb-small-up":         "screen and (min-width: 321px)",
  // "thumb":                  "screen and (max-width: 499px)",
  // "thumb-mid":              "screen and (max-width: 640px)",
  // "thumb-mid-up":           "screen and (min-width: 640px)",
  // "thumb-height":           "screen and (max-height: 500px)",
  "handheld":               "screen and (min-width: 500px) and (max-width: 800px)",
  // "handheld-and-up":        "screen and (min-width: 500px)",
  // "pocket":                 "screen and (max-width: 800px)",
  "lap":                    "screen and (min-width: 801px) and (max-width: 1024px)",
  // "lap-and-up":             "screen and (min-width: 801px)",
  // "portable":               "screen and (max-width: 1024px)",
  "desk":                   "screen and (min-width: 1025px)",
  // "true-desk":              "screen and (max-width: 1104px)",
  // "true-desk-up":           "screen and (min-width: 1105px)",
  // "widescreen-down":        "screen and (max-width: 1160px)",
  // "widescreen":             "screen and (min-width: 1160px)",
  // "wide-laptop":            "screen and (max-width: 1440px)",
  // "big-screen":             "screen and (min-width: 1440px)",
  // "device-mobile":          "screen and (max-device-width: 800px) and (max-device-height: 800px)",
  // "device-desk":            "screen and (min-device-width: 801px) and (min-device-height: 801px)"
) !default; // Responsive breakpoints. Add/remove as appropriate

// The usual breakpoint mixin
// Except it updates the $current-breakpoint variable
// 1. If breakpoint name exists in map
// 2. Update $current-breakpoint
// 3. Open a media query
// 4. Then reset $current-breakpoint
// 5. If we want to include the media query alias in the name
// 6. If breakpoint name doesn't exist in map, warn the user
@mixin media($breakpoints: "all", $incl: null) {
  @if $breakpoints == "all" {
    $incl: 2;
    $breakpoints: $breakpoints-list;
  }
  
  @content;

  // Search breakpoint map for alias
  @each $alias, $value in $breakpoints {
    $value: map-get($breakpoints-list, $alias);

    // If alias exists, print out media query
    @if $value != null {                                  // 1
      $current-breakpoint: $alias !global;                // 2

      @media #{$value} {                                  // 4

        @if ($incl) {                                     // 5
          &--#{$alias} {
            @content;
          }
        }

        @else {
          @content;
        }
      }
      $current-breakpoint: $default-breakpoint !global;   // 5
    }

    @else {
      @error "No breakpoint found for #{$alias}";         // 6
    }
  }
}

// Generating placeholders
// actually generating one placeholder per breakpoint
// 1. If placeholder doesn't exist yet
// 2. Store the name
// 3. Looping through all the breakpoints
// 4. Opening a media query
// 5. Generating a placeholder at root level
// 6. With desired content
// 7. And dumping a placeholder out of any media query
// 8. If placeholder already exist, warn the user
@mixin placeholder($name, $breakpoints: null) {
  @if not index($placeholders, $name) {                 // 1
    $placeholders: append($placeholders, $name) !global; // 2

    @at-root {
      @each $breakpoint, $value in $breakpoints-list {   // 3

        @media #{$value} {                               // 4
          %#{$name}-#{$breakpoint} {                     // 5

            @content;                                    // 6
          }
        }
      }

      %#{$name}-#{$default-breakpoint} {                 // 7

        @content;
      }
    }

    @if ($breakpoints == "root" or $breakpoints == "all") {
      .#{$name} {
        @include _($name);
      }
    }

    @if ($breakpoints == "all") {
      .#{$name} {
        @include media($breakpoints-list, 1) {
          @include _($name);
        }
      }
    }

    @else if ($breakpoints and $breakpoints != "root" ) {
      .#{$name} {
        @include media($breakpoints, 1) {
          @include _($name);
        }
      }
    }
  }

  @else {
    @warn "Placeholder `#{$name}` already exists.";      // 8
  }
}

// Extend the accurate placeholder
// according to the current scope
// Basically instead of doing:
//    @extend %clear;
// You go:
//    @include _(clear);
// Not much longer, is it?
@mixin _($name) {
  @extend %#{$name}-#{$current-breakpoint} !optional;
}

// -----------------------------------------------------------------------------
// @include placeholder() arguments
// -----------------------------------------------------------------------------
// placeholder arg 01: Name
// placeholder arg 02: Media queries classname creation
//                     "":                       Do not create any classes for the placeholder
//                     "root":                   Create a class for the placeholder only on the root
//                     "all":                    Only create a class for the placeholder on every media queries + the root
//                     "('thumb', 'lap',...)":   Only create a class for the placeholder on selected media queries('thumb' & 'lap')

// -----------------------------------------------------------------------------
// @include media() arguments
// -----------------------------------------------------------------------------
// media arg 01: Media queries
// media arg 02: Add the media-query alias to the name of the class
//               "":  False
//               "1": Add the class

// -----------------------------------------------------------------------------
// DEMO CODE
// -----------------------------------------------------------------------------

// // Basic placeholder arg will simply create the placeholder with the wanted name
@include placeholder('placeholder_01') {
  width: 100px;
  height: 100px;
}

// The second parameter will create a class for the placeholder only on the root
@include placeholder('placeholder_02', 'root') {
  width: 200px;
  height: 200px;
}

// Basic placeholder arg will only create a class for the placeholder on every media queries + the root
@include placeholder('placeholder_03', 'all') {
  width: 300px;
  height: 300px;
}

// The second parameter will only create a class for the placeholder on selected media queries('thumb' & 'lap')
@include placeholder('placeholder_04', ('handheld', 'lap')) {
  width: 400px;
  height: 400px;
}

// Only create class (no placeholder) for every media queries with the alias extension
.square_01 {
  @include media() {
    width: 5px;
    height: 5px;
  }
}

// Only create class (no placeholder) for selected media query
.square_02 {
  @include media("lap") {
    width: 10px;
    height: 10px;
  }
}

// Only create class (no placeholder) for selected media query with the alias extension
.square_03 {
  @include media("lap", 1) {
    width: 10px;
    height: 10px;
  }
}

// Call a placeholder inside the class within selected query
.extended_square_01 {
  @include media("lap") {
    @include _('placeholder_04');
  }
}

// Call a placeholder inside the class within selected query with the alias extension
.extended_square_02 {
  @include media("lap", 1) {
    @include _('placeholder_04');
  }
}

// Call a placeholder inside the class within every queries
.extended_square_03 {
  @include media() {
    @include _('placeholder_04');
  }
}

// .m-nav--ver {
//   @include media(("desk", "lap"), 1) {
//     &,
//     .m-nav__set {
//       display: flex;
//       flex-direction: column;
//       align-items: left;
//       justify-items: left;
//       justify-content: left;
//     }

//     .m-nav__item,
//     .m-nav__set {
//       padding-left: 0;
//     }

//     .m-nav__item,
//     .m-nav__link {
//       flex-direction: column;
//       justify-content: center;
//       align-items: left;
//     }

//     .m-nav__item.is-active {
//       padding-bottom: 0;
//     }
//   }
// }

undefined

.placeholder_02 {
  width: 200px;
  height: 200px;
}
@media screen and (min-width: 500px) and (max-width: 800px) {
  .placeholder_03--handheld {
    width: 300px;
    height: 300px;
  }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .placeholder_03--lap {
    width: 300px;
    height: 300px;
  }
}
@media screen and (min-width: 1025px) {
  .placeholder_03--desk {
    width: 300px;
    height: 300px;
  }
}
.placeholder_03 {
  width: 300px;
  height: 300px;
}
@media screen and (min-width: 500px) and (max-width: 800px) {
  .placeholder_04--handheld, .extended_square_03--handheld {
    width: 400px;
    height: 400px;
  }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .placeholder_04--lap, .extended_square_01, .extended_square_02--lap, .extended_square_03--lap {
    width: 400px;
    height: 400px;
  }
}
@media screen and (min-width: 1025px) {
  .extended_square_03--desk {
    width: 400px;
    height: 400px;
  }
}
.placeholder_04, .extended_square_01, .extended_square_02, .extended_square_03 {
  width: 400px;
  height: 400px;
}
.square_01 {
  width: 5px;
  height: 5px;
}
@media screen and (min-width: 500px) and (max-width: 800px) {
  .square_01--handheld {
    width: 5px;
    height: 5px;
  }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .square_01--lap {
    width: 5px;
    height: 5px;
  }
}
@media screen and (min-width: 1025px) {
  .square_01--desk {
    width: 5px;
    height: 5px;
  }
}

.square_02 {
  width: 10px;
  height: 10px;
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .square_02 {
    width: 10px;
    height: 10px;
  }
}

.square_03 {
  width: 10px;
  height: 10px;
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .square_03--lap {
    width: 10px;
    height: 10px;
  }
}