COMPASS/SASS Examples

//--------------------------------------------------------------
//--------------------------------------------------------------
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

//---------------------------------------------------------------
//@import "compass/reset";

//@import "bourbon";

@import "compass/support";
@import "compass/css3";
@import "compass/layout";




//@import "foundation/components/labels";

@import "sassy-buttons";

@import "compass/reset/utilities";
@import "compass/typography";
@import "compass/utilities/tables";

//@import "foundation/variables";
//@import "foundation/components/global";

@import "blueprint/buttons";
@import "blueprint/fancy-type";
@import "blueprint/form";
@import "blueprint/interaction";
//@import "blueprint/reset";
@import "blueprint/typography";
@import "blueprint/utilities";

//---------------------------------------------------------------

$outer_w : 200px;
$inner_w : floor($outer_w/2);
$gray-slug : gray !default;

//---------------------------------------------------------------

@mixin zbox($size, $color) {

   position: absolute;
   width: $size;
   height: $size;
   top: floor($size/2);
   left: floor($size/2);

   background-color: $color;
}
//------------------------------
@mixin navigation-list {

   list-style-type: none;
   margin: 0;

   padding: 0;
   overflow: hidden;

   >li {
      display: block;
	  float: left;
	  margin-right:5px;
	  padding: 5px;
	  border-left: solid 1px #999;
	  &:last-child {
	     margin-right: 0;
	  }
	  &:first-child {
	     border: none;
	  }
   }
}

//------------------------------
@mixin zbox4 {
   float: left;
   margin-right:5px;
   width: 200px;
   height: 200px;
}

//------------------------------
@mixin zborder4 {

   $bord_color: #aaa;
   border-right: solid 1px $bord_color;
   border-bottom: solid 1px $bord_color;
   border-top: solid 1px $bord_color;
   border-left: solid 1px $bord_color;

}

//------------------------------
@function g_shade($a, $opacity) {
   @return rgba($a,$a,$a,$opacity);
}

//---------------------------------------------------------------
 @include font-face("MyFont", font-files("test.otf"));

//------------------------------

//@include global-reset;
//@include blueprint-global-reset;

//@include blueprint-typography;




.section {
   float:left;
   overflow:hidden;
   padding: 10px;
   margin-right: 5px;
   margin-bottom: 5px;
   @include zborder4;
}


h3 {
   @include sassy-button;
}
//------------------------------
#blueprint-button {

   @include button-button(false);
   @include button-colors(red,yellow,orange,pink);
   @include button-active-colors(yellow,red,pink,orange);
   @include button-hover-colors(white,orange,red,pink);
}

//------------------------------
#blueprint-fancy-type {
   @include fancy-type;
}
#blueprint-alt {
   @include alt;
}
#blueprint-dquo {
   @include dquo;
}
#blueprint-incr {
   @include incr;
}
#blueprint-caps {
   @include caps;
}
#blueprint-fancy-paragraphs {
   @include fancy-paragraphs;
}
#blueprint-sibling-indentation {
   @include sibling-indentation;
}

//------------------------------
#blueprint-inline-form {
   @include blueprint-inline-form;
}

#blueprint-form {
   @include blueprint-form-layout;
   @include blueprint-form-borders;
   @include blueprint-form-sizes;
}

//------------------------------
#blueprint-interaction {
   .feedback {
      @include feedback-base;
   }
   .error {
      @include error;
   }
   .notice {
      @include notice;
   }
   .success {
      @include success;
   }
   .info {
      @include info;
   }
   .highlight {
      @include highlight;
   }
   .added {
      @include added;
   }
   .removed {
      @include removed;
   }
}
//------------------------------
#blueprint-utilities {
   .nowrap {
      @include nowrap;
   }
   .clearfix {
      @include clearfix;
   }
}
//------------------------------
.box-shadow {
   @include zbox(50px, #afa);
   top:50px;
}

#box-shadows {
   position: relative;
   height:300px;
}

#box-shadow-default {
   @extend .box-shadow;
   @include single-box-shadow;
}
#box-shadow-custom {
   @extend .box-shadow;
   left:100px;
   @include box-shadow(red 2px 2px 10px);
}
#box-shadow-custom-multiple {
   @extend .box-shadow;
   left:170px;
   @include box-shadow(rgba(blue,0.8) 4px 4px 25px, rgba(green,0.9) 0 0 30px inset);
}

//------------------------------
#compass-inline-block {
   @include inline-block;
}

//------------------------------
#compass-opacity-example {
   div {
      float: left;
	  width: 40px;
	  height: 40px;
	  color: white;
	  background: red;
   }
}

@for $i from 1 to 5 {
    #compass-opacity-example div:nth-child(#{$i}) {
	     @include opacity($i/10*2);
		 }
	  }

//------------------------------
$default-text-shadow-color: rgba(red,0.6);
$default-text-shadow-blur: 3px;
$default-text-shadow-v-offset: 1px;

#compass-text-shadow {
   .single-shadow {
      @include single-text-shadow;
   }
   .custom-shadow {
      @include text-shadow(rgba(blue,0.2) 1px 1px 0, rgba(red,0.5) 2px 2px 0, rgba(yellow,0.9) 3px 3px 0);
   }
}

//------------------------------
 #wrapper4 {
    position: relative;
	height: $outer_w+40px;
 }
//------------------------------
#test4 {
   @include zbox($outer_w, red);
   margin-top: -$outer_w/2;
   @include border-radius(floor($outer_w/4));
   div {
      @include zbox($inner_w, yellow);
	  @include border-radius(floor($inner_w/4));
	  @include rotate;
   }
}
//------------------------------
#test5 {
   font-family: "MyFont";
   font-size: 2em;
}
//------------------------------
#test_img {
   background-image: image-url("tanec1.jpg");
   width: image-width("tanec1.jpg");
   height: image-height("tanec1.jpg");
}
//------------------------------
@for $i from 1 to 4 {
   .#{$gray-slug}-#{$i} {

      $zsize : $outer_w - 40px*$i;
      @include zbox($zsize, g_shade($i*60, 1)) ;

	  @if $i==1 {
	     position: relative;
		 margin-top: -$outer_w/3*1.5!important;
		 margin-bottom: $outer_w/2;
	  }

	  margin-left: -$zsize/4;
	  margin-top: -$zsize/4;
   }
}
//------------------------------
#nav4 {

   @include navigation-list;
   margin-top:100px;
}
//------------------------------

#gradients4 {

   div {
      @include zbox4;

	  &:nth-child(1) {
	     @include background-image(radial-gradient(30px 60px, aqua 10px, #ff0000 90px));
	  }
	  &:nth-child(2) {
	     @include background-image(linear-gradient(left top, white, #f00));
	  }

	  &:nth-child(3) {
	     @include background-image(linear-gradient(orange,green));
	  }
	  &:nth-child(4) {
	     @include background-image(linear-gradient(red,orange,yellow));
	  }
	  &:nth-child(5) {
	     @include background-image(linear-gradient(white, red 30%, green 70%, black));
	  }

	  &:nth-child(6) {
	     @include background-image(linear-gradient(left, white, black));
	  }

   }
}

//------------------------------
#blueprint-typography4 {

   clear: left;

   .normal-text {
      @include normal-text;
   }
   .fixed-width-text {
      @include fixed-width-text;
   }
   .header-text {
      @include header-text;
   }
   .quiet {
      @include quiet;
   }
   .loud {
      @include loud;
   }
}

//------------------------------
#compass-grid-background {
   width:200px;
   height:200px;
   @include grid-background;
}

//------------------------------
#compass-stretch-layout div {

   float: left;
   margin-right: 10px;
   width: 150px;
   height: 150px;
   position: relative;

   >div {
      @include button-button;

      background: darken(orange,10);
      color: white;

      &.stretch-full {
         @include stretch;
      }
	  &.stretch-offset {
	     @include stretch(1em,1em,1em,1em);
	  }
	  &.stretch-x {
	     @include stretch-x(4em,4em);
	  }
	  &.stretch-y {
	     @include stretch-y(3em,3em);
	  }
	}
}

//------------------------------
#compass-typography {

   p {
      @include info;
   }

   .hover-link {
      @include hover-link;
   }
   .link-colors {
      @include link-colors(red, green, orange, lighten(red,10), darken(red,10));
   }
   .unstyled-link {
      @include unstyled-link;
   }

   .no-bullet {
      @include no-bullet;
   }
   .no-bullets {
      @include no-bullets;
   }
   .pretty-bullets {
      $z : "type_audio.png";
	  $w : image_width($z);
	  $h : image_height($z);
      @include pretty-bullets($z, $w, $h, 2, $w*2);
   }
   .horizontal-list {
      @include horizontal-list;
   }
   .inline-list {
      @include inline-list;
   }
   .delimetered-list {
      @include delimited-list(" |");
	  li {
	     padding-left: 5px;
	  }
   }
   .inline-block-list {
      @include inline-block-list(15px);
   }

}

//------------------------------
#compass-table {
   border-collapse: collapse;

   $table-color: lighten(yellow,20%);
   @include table-scaffolding;

   @include alternating-rows-and-columns($table-color, adjust-hue($table-color, 10deg), #333,
   lighten(red,30%), green);

   @include inner-table-borders(1px, #444);
   @include outer-table-borders(2px, red);

}


//------------------------------
//------------------------------


//--------------------------------------------------------------
//--------------------------------------------------------------

@import "compass/utilities/general/hacks";
@import "compass/utilities/general/float";
@import "compass/utilities/general/min";
@import "bourbon";

.section {
   @include has_layout;
   @include float-left;

   border: solid 1px #777;
   padding: 5px;
   @include border-top-radius(10px);
   @include border-bottom-radius(30px);

   @include min-width(400px);
   @include min-height(300px);
}

h3 {
   @include button(shiny, #ff0000);
   margin: 0 auto;
}

//-----------------------------------
#bourbon-buttons {
   div:first-child {
      @include button;
   }
   div:nth-child(2) {
      @include button(pill, green);
   }
   div:last-child {
      @include button(shiny, orange);
   }
}

//--------------------------------------------------------------
//--------------------------------------------------------------
@import 'susy';

#container1 {

   border: solid 1px red;

   $total-columns: 12;
   $column-width: 4em;
   $gutter-width: 1em;
   $grid-padding: $gutter-width;

   @include container;

   @include susy-grid-background;

   .banner {
      clear: both;
	  background: #ffeeee;
	  @include push(3,12);

   }

   .pagenav {
      @include span-columns(3,12);
	  @include bleed(2);
	  background: rgba(red,0.3);


   }

   .contentinfo {
      @include span-columns(9 omega);


   }

   .main {
      @include span-columns(9 omega, 12);
	  outline: solid 1px green;

	  .summary {
	     //@include box-sizing(border-box);
	     @include span-columns(4,9);
		 @include pull(2,9);

		 margin-top:500px;
		 background: rgba(#eeffee,0.4);

	  }
	  .content {
	     @include span-columns(5 omega, 9);
		 @include prefix(1,9);
		 @include suffix(1,9);
		 background: rgba(orange,0.5);

		 .content4 {
		    @include span-columns(3,5);
			@include post(1,5);
			background: rgba(red, 0.2);

		 }

		 .content5 {
		    @include span-columns(3,5);
			@include pre(1,5);
			background: rgba(red, 0.2);
		 }
	  }
   }



}