Sass Files for my course on workflows

sassfiles.scss

// style.scss
// ==============

//Compass imports
@import "compass";
@import "compass/css3/box-shadow";

//Core partials
@import "variables";
@import "mixins";
@import "base";
@import "modules";

// JS partials
@import "pixgrid";
@import "rclick";


// _variables.scss
// =================
@import "http://fonts.googleapis.com/css?family=Patua+One|Inika";

$beige         : #E3C691;
$darkGreenGold : #8D8862;
$lightGreen    : #C0DC99;
$green         : #507356;
$lightBlue     : #97D5D9;
$desatBlue     : #464B65;
$purple        : #3E2B3D;
$darkPurple    : #3A3248;
$pink          : #CC8E94;
$skin          : #B08B7B;

$headFont : 'Patua One', sans-serif;
$bodyFont : 'Inika', serif;


// _mixins
// ========
@mixin backImage($image) {
  background: url($image) no-repeat 50% 20% ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  @media (min-width: 801px) {
   height: 350px;
  }

  @media (max-width: 800px) {
   height: 150px;
  }

  @media (max-width: 300px) {
   height: 100px;
  }
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}


// _base.scss
// ==============
body {
  background: lighten($beige, 10%);
  font-family: $bodyFont;
  font-size: 1.1em;
}

#content {
  color: $pink;
  font-size: 2em;
}

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

#{headings()} {
  font-family: $headFont;
  font-size: 3em;
}

h1 {
  font-size: 3.5em;
  margin-bottom: 10px;
  color: $green;

  @media (max-width: 700px) {
    font-size: 2.2em;
  }
}

h2 {
  font-size: 1.5em;
  color: $purple;
}

p {
  font-size: 1.3em;
  line-height: 1.5em;
    color: $purple;
  margin-bottom: 20px;
    margin-top: 15px;
}

section {
  padding: 20px 0;
}

.artgroup {
    @include clearfix;
} //artgroup


// _modules.scss
// ============
.city {
  @include backImage('../images/backgrounds/seattle_skyline.jpg');
  img.logo {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    max-width: 450px;
    min-width: 250px;
  } //logo
} //city

.featuredartists {
  background: $darkGreenGold;
  border-top: 20px solid $beige;
  border-bottom: 50px solid $green;

  h1 {
    font-size: 3em;
    color: darken($green, 20%);
    @media (max-width: 700px) {
      font-size: 2em;
    }
  } //h1

  h2 {
    margin-top: 20px;
    font-size: 1.8em;
    color: darken($beige, 8%);
    @media (max-width: 700px) {
     display: none;
    }
  } //h1

  p {
    color: darken($green, 15%);
  }

 .artistlist {
    padding-bottom: 20px;

    h2 {
      margin-top: 5px;
      font-size: 1.2em;
      color: lighten($beige, 8%);
    } //h2

    .item {
      min-width: 95px;
      color: darken($darkGreenGold, 10%);
      width: 18%;
      float: left;
      padding: 1%;
      text-align: center;
      position: relative;

      >img {
        max-width: 130px;
        margin: 0 auto;
        display: block;
        @include border-radius(50%);
        width: 100%;
      } //img
    } //item
  } //artistlist
} //featured artists

.potterypix {
  @include backImage('../images/backgrounds/pottery_workshop.jpg');
  border-bottom: 50px solid $darkGreenGold;
} //venue

.aboutvenue {
  img {
    float: right;    
  }
}

.workshoppix {
  @include backImage('../images/backgrounds/woodworking_workshop.jpg');
  border-bottom: 50px solid $darkGreenGold;
} //workshops

.ontour {
  h1 {
    color: lighten($purple, 5);
    font-size: 3em;
    bottom: 10px;
    right: 10%;
  }

  h2 {
    font-size: 1.8em;
    color: $darkGreenGold;
    border-top: 1px solid $darkGreenGold;
    padding-top: 5px;
  } //h3

  h3 {
    font-size: 1.3em;
    color: lighten($purple, 15);
    padding-bottom: 5px;
  } //h4

  img {
    float: right;
    @include border-radius(50%);
    padding-left: 20px;
    width:20%;
    min-width: 120px;
    max-width: 160px;
  } //img
} //ontour


// _pixgrid.scss
// ==============
.pixgrid {
   img {
      max-width: 90px;
      display: block;
      @include border-radius(15px);
      padding: 0 5px 5px 0;
      cursor: url(../images/misc/magnifying_glass.png), auto;
   }
  
  .preview img {
    padding: 0;
  }
}


// _rclick.scss
// ==============
.rclick {
  .item {
    display: block;
    float: left;
    img {
      @include border-radius(none);
    }
  } //item

  .preview {
    position: relative;

    img {
      position: absolute;
      z-index: 90;
      max-width: 400px;
      display: block;
      border: 1px solid #FCF4DC;
      margin: 0;
      @include border-radius(none);
      @include box-shadow(black 5px 5px 12px);
    }
  } //preview
} //rclick