BEM Blueprint

bem-component-blueprint.scss

///
/// THE <BLUEPRINT> BLOCK
///
///============================================================================
///
/// @description
///   desc
///
/// @usage
///   <div class="blueprint">
///     <header class="blueprint__header">
///     </header>
///   </div>
///
///============================================================================
///
/// BLOCK NAME
///----------------------------------------------------------------------------
$block: 'blueprint';
///
/// @IMPORTS
///----------------------------------------------------------------------------
@import 'blueprint';
///
/// LOCAL :ROOT VARIABLES
///----------------------------------------------------------------------------
$spacing-mobile: 2rem;
///
/// BLOCK CODE
///----------------------------------------------------------------------------
.#{$block} {
  // mobile styles

  @include media-query('medium') {
    // medium and up styles
  } 
  ///
  /// MODIFIERS
  ///----------------------------------------------------------------------------
  &--modifier {
    // mobile styles
    @include media-query('medium') {
      // medium and up styles
    }
  }
  ///
  /// ELEMENTS
  ///----------------------------------------------------------------------------
  &__header {
    // mobile styles
   
    @include media-query('medium') {
      // medium and up styles
    }
    
    &--modifier {
      // mobile styles
      @include media-query('medium') {
        // medium and up styles
      }
    }

    &-content {
      // mobile styles
     
      @include media-query('medium') {
        // medium and up styles
      }
    }
 
  }
  ///
  /// BLOCKS
  ///----------------------------------------------------------------------------
  &-filter {
    // mobile styles
    
    @include media-query('medium') {
      // medium and up styles
    }
  }
  ///
  /// MISC
  ///----------------------------------------------------------------------------
  
}