Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

$width: 800px;
$padding: 10px;
$border-width: 0;

.box {
  box-sizing: border-box;
  width: $width;
  @if $padding > 0 {
    padding: $padding;
  }
  @if $border-width != 0 {
    bordeR: $border-width solid black;
  }
  $no-box-width: $width - ($padding*2 + $border-width * 2);
  @if $no-box-width < $width {
    .no-boxsizing & {
      width: $no-box-width;
    }
  }
}
  
/* ==================================================*/

@mixin default-box {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto;
  @content;
}

/* ==================================================*/

@mixin default-box {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto;
}

.my-new-class {
  @include default-box;
  block: bar;
  width: 100%;
}

.this-class {
  @include default-box;
}

.that-class {
  @include default-box;
}


/* ==================================================*/


$name: foo !default;
$attr: border !default;
$color: blue !default;

p.#{$name} {
  #{$attr}-color: $color;
}

/* ==================================================*/


$width: 8;

.blocks {
  color: 001122 + 113344;
}

.block {
  font: 10px/8px;
  width: $width/2;
  width: round(1.5)/2;
  height: (500px/2);
  margin-left: 5px + 8px/2px;
}

/* ==================================================*/

$my-max: 'only screen and (max-width: 320px)';

.box {
  width:880px;
  @media #{$my-max} {
    width: 97%;
  }
}


/* ==================================================*/

.block {
  width:100px;
  @media print{
    width:100%;
  }
}

/* =========================*/
.block {
  width: 100px;
  .no-width & {
    width:10px;
  }
}

/* =========================*/

$class: yu;

.#{$class} {
  yu: so;
  so: fine;
}

/* =========================*/
$class: yu;

.#{$class} {
  yu: $class;
}

/* =========================*/

.block {
  content: "I ate #{1+3+4} pies";
}

$list: mean nice meat rice;

.block {
  foo:bar;
  +  .inset {
      this: that;
      .build {
        for:me;
      }
    }
}


a {
  color: orange;
  &.hover {
    text-decoration: underline;
  }
}

SassMeister-output.css

.box {
  box-sizing: border-box;
  width: 800px;
  padding: 10px; }
  .no-boxsizing .box {
    width: 780px; }

/* ==================================================*/
/* ==================================================*/
.my-new-class {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto;
  block: bar;
  width: 100%; }

.this-class {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto; }

.that-class {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto; }

/* ==================================================*/
p.foo {
  border-color: blue; }

/* ==================================================*/
.blocks {
  color: 114466; }

.block {
  font: 10px/8px;
  width: 4;
  width: 1;
  height: 250px;
  margin-left: 9px; }

/* ==================================================*/
.box {
  width: 880px; }
  @media only screen and (max-width: 320px) {
    .box {
      width: 97%; } }

/* ==================================================*/
.block {
  width: 100px; }
  @media print {
    .block {
      width: 100%; } }

/* =========================*/
.block {
  width: 100px; }
  .no-width .block {
    width: 10px; }

/* =========================*/
.yu {
  yu: so;
  so: fine; }

/* =========================*/
.yu {
  yu: yu; }

/* =========================*/
.block {
  content: "I ate 8 pies"; }

.block {
  foo: bar; }
  .block + .inset {
    this: that; }
    .block + .inset .build {
      for: me; }

a {
  color: orange; }
  a.hover {
    text-decoration: underline; }