SCSS Examples

example.scss

/*-----------------------------------------------
  Body - All
-----------------------------------------------*/

/*headings*/

@for $i from 1 through 6 { 
    h#{$i}{
    	font-family: Bitter, Arial, sans-serif;
		color: rgb(107,57,8);
		font-size: 32px - ($i - 1)*2px;
    }
}


/*-----------------------------------------------
  Grid System
-----------------------------------------------*/


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */

.group{
	zoom:1; /* For IE 6/7 (trigger hasLayout) */

	&:before{
		content:"";
    	display:table;
	}

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

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	/* Adjust margin-bottom for this specific site */
	margin-bottom: 20px;

	@media only screen and (max-width: 480px){ 
		margin: 1% 0 1% 0%;		/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
		margin-bottom: 20px; 	/* Adjust margin-bottom for this specific site */
	}

	&:first-child{
		margin-left: 0; /* all browsers except IE6 and lower */
	}
}
/*  GRID OF TWO   ============================================================================= */

@for $i from 1 through 2 { 
    .span_#{$i}_of_2 {

    	width: percentage((1*$i/2.0)-((2-$i)*0.008));

        @media only screen and (max-width: 480px) {
        	width: 100%;
        }
    }
}	

/*  GRID OF THREE   ============================================================================= */

@for $i from 1 through 3 { 
    .span_#{$i}_of_3 {

    	width: percentage((1*$i/3.0)-((3-$i)*0.0054));

        @media only screen and (max-width: 480px) {
        	width: 100%;
        }
    }
}	

/*  GRID OF FIVE   ============================================================================= */

@for $i from 1 through 5 { 
    .span_#{$i}_of_5 {

    	width: percentage((1*$i/5.0)-((5-$i)*0.0032));

        @media only screen and (max-width: 480px) {
        	width: 100%;
        }
    }
}