Final sassy file for demo

sass-demo-final.scss

@import "partialSassFile";
@import "anotherSassFile";

$text-color: red;
$shift-color: green;

p {
  color: $text-color + $shift-color;
}


// nesting
.items {
  p {
    color: #0000ff;
  }
  
  // note you can keep media types next to what they change
  @media (max-width: 400px) {
    p {
      color: green;
    }
  }

  li {
    display: inline-block;
  }
  
}

.ball {
  //border-radius: 50%;
  @include border-radius(50px);
  background: #BADA55;
  width: 100px;
  height: 100px;
}

.first-ball {
  @extend .ball;
  background: blue;
}

.second-ball {
  @extend .ball;
}

.third-ball {
  @extend .ball;
  margin-left: 20px;
}