A simple breakpoint mixin is just all you need!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
README.md
_functions.scss
_mixins.scss
_sassy-breakpoint.scss
_variables.scss
bower.json
sache.json
sass-watch-test.sh

README.md

SassyBreakpoint forthebadge

A simple breakpoint mixin is just all you need!

Required

  • Sass 3.3 and up
  • Bower npm install -g bower

Installation

bower install sassybreakpoint --save-dev

Settings

// _Variables.scss
// based on Foundation 5 Framework

$sf-screen: "only screen" !default;

$sf-small-up: $sf-screen !default;
$sf-small-only: "#{$sf-screen} and (max-width: #{upper-bound($sf-small-range)})" !default;

$sf-medium-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-medium-range)})" !default;
$sf-medium-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-medium-range)}) and (max-width:#{upper-bound($sf-medium-range)})" !default;

$sf-large-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-large-range)})" !default;
$sf-large-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-large-range)}) and (max-width:#{upper-bound($sf-large-range)})" !default;

$sf-breakpoints: (
    "small": $sf-small-up,
    "small-only": $sf-small-only,

    "medium": $sf-medium-up,
    "medium-only": $sf-medium-only,

    "large": $sf-large-up,
    "large-only": $sf-large-only
) !default;

How to use

Scss:

// create 3 breakpoints for aside
aside {
  @include sf-breakpoint("small-only") {
      width: 100%;
      content: "small-only";
  }
  @include sf-breakpoint("medium-only") {
      width: 80%;
      content: "medium-only";
  }
  @include sf-breakpoint("large-only") {
      width: 30%;
      content: "large-only";
  }
}

Output:

  @media only screen and (max-width: 40em) {
    aside {
      width: 100%;
      content: "small-only"; 
    } 
  }
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    aside {
      width: 80%;
      content: "medium-only";
    } 
  }
  @media only screen and (min-width: 64.063em) and (max-width: 90em) {
    aside {
      width: 30%;
      content: "large-only";
    } 
   }

SassyBreakpoint + SassyPlaceholder

You can extend any placeholder within a @media directive when combining it with SassyPlaceholder.

License

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