SassyPlaceholder

A Powerful Sass Placeholder mixin.

Required

• Sass 3.4
• Bower npm install -g bower

Installation

bower install sassyplaceholder --save-dev

How to use

Scss:

// Creating a Placeholder
// name: %default-style
@include sf-add-p(default-style){
    margin: 10px;
    border: 1px;
}



// Extending...
.header {
    // on small-only breakpoint
  @include sf-breakpoint("small-only"){
      @include sf-use-p(default-style);
  }
}

.footer {
    // on medium-only breakpoint
  @include sf-breakpoint("medium-only"){
      @include sf-use-p(default-style);
  }
}

/* normal extend */
.content{
  @extend %default-style;
}

Output:

@media only screen and (max-width: 40em) {
  .header {
    margin: 10px;
    border: 1px; 
  } 
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .footer {
    margin: 10px;
    border: 1px;
  }
}

/* normal extend */
.content {
  margin: 10px;
  border: 1px;
}

Credits

• @HugoGiraudel

License

The SassyPlaceholder is open-sourced software licensed under the MIT license