codingdesigner

// path to local mixin
@import "../../stylesheets/breakpoint";
// @import "breakpoint";


/* 1. Using Breakpoint to do exactly what you propose */
$breakpoint-default-media: 'only screen';
$break-small: 320px;
$break-medium: 580px;
$break-large: 1234px;

codingdesigner

<nav class="main-menu">
  <ul>
    <li>
      <a href="">Book Store</a>
    </li>
    <li>
      <a href="">Readings</a>
    </li>
    <li>
      <a href="">Book Services</a>

codingdesigner

// Sass v3.2.5

@mixin debug-outline($color: red, $background-color: false) {
  outline: 1px solid $color;
  @if $background-color != false {
    background-color: $background-color;
  }
}

.foo {

codingdesigner

// Sass v3.2.5
// Breakpoint v1.3

@import "breakpoint";

// Sass v3.2.5
// Breakpoint v1.3

// @import "breakpoint";

codingdesigner

$iterations: 100;

@function lmao($orig-color, $iterations, $sx, $sy, $sz) {
  $output: '';
  $end: $iterations;
 
  $x0: $sx / 10;
  $y0: $sy;
  $z0: $sz;
  $h: 0.01;

codingdesigner

// ---
// Sass (v3.2.9)
// ---


$button-color: #ECECEC;
$button-text-color: #2d2d2d;

input[type="submit"] {
  border-radius: 0.2em;

codingdesigner

// ---
// Sass (v3.2.9)
// ---


@mixin button() {
  $button-color: #ECECEC;
  $button-text-color: #2d2d2d;
  border-radius: 0.2em;
  color: $button-text-color;

codingdesigner

// ---
// Sass (v3.2.9)
// ---


.button {
  $button-color: #ECECEC;
  $button-text-color: #2d2d2d;
  border-radius: 0.2em;
  color: $button-text-color;

codingdesigner

// ---
// Sass (v3.2.9)
// ---


%button {
  $button-color: #ECECEC;
  $button-text-color: #2d2d2d;
  border-radius: 0.2em;
  color: $button-text-color;

codingdesigner

// ---
// Sass (v3.2.9)
// ---


@mixin button($button-color: #ECECEC, $button-text-color: #2d2d2d) {
  border-radius: 0.2em;
  color: $button-text-color;
  background: {
    color: $button-color;