nickcooley · December 5, 2011 03:28 · a-laughlin · Jan 19, 2012
diff --git a/_basics.scss b/_basics.scss
 body {
  text-align: center;
  > #container {
    text-align:left;
    margin:0 auto;
    width:500px;
  }
 }


 header {
  h1 {
    font-size:26px; margin-bottom:26px;
  }
 }
 div[role="main"] {
  @include background-image(linear-gradient(lighten($color1, 30%), lighten($color2, 30%)));
  @include border-radius($border-radius * 3.5, $border-radius * 3.5 ); 
  border:3px solid $color2;
  padding:$border-radius;
  margin-bottom:25px; 
  
  ul {
    padding-top:14px;
  }
  li {
    color:$fontcolor1;
    margin-bottom:12px;
  }
 }

 button {
  //leverages the buttons mixin
  @include buttons();
 }
diff --git a/button.scss b/button.scss
 /* 

 Sample mixin which creates a button and the following states (based on classes): 
 - primary
 - disabled

 (based on pseudo-selector)
 - :hover {}
 */


 @mixin buttons($basicBorder:1px, $gradient1:#fff, $gradient2:#d8dee7){
  button{
    border:$basicBorder solid #acbed3;
    //brings in Compass' background-image mixin:  http://compass-style.org/reference/compass/css3/images/
    @include background-image(linear-gradient($gradient1, $gradient2));
    padding:3px 14px;
    font-size:12px;
    color:#3b557d;
    //brings in Compass' border-radius mixin: http://compass-style.org/reference/compass/css3/border_radius/
    @include border-radius($border-radius, $border-radius);
    cursor:pointer;
    
    //& attribute adds 
    
    &.primary {
      border:2px solid #3b557d; 
      padding:5px 15px; 
      //requires a $border-radius variable
      @include border-radius($border-radius + 2, $border-radius + 2); 
    }
    &.disabled {
      opacity: .8;
    }
    &:hover {
      @include background-image(linear-gradient($gradient2, $gradient1));
    }  
  } 
 }
diff --git a/sample.html b/sample.html
 <!DOCTYPE html>
 <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
 <!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
 <!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
 <!--[if gt IE 8]><!-->
 <html class='no-js' lang='en'>
  <!--<![endif]-->
  <head>
    <meta charset='utf-8' />
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
    <title></title>
    <meta content='' name='description' />
    <meta content='' name='author' />
    <meta content='width=device-width, initial-scale=1.0' name='viewport' />
    
    <link id="cssFile" href='stylesheets/screen1.css' media='all' rel='stylesheet' />
       
  </head>
  <body>
    <div id='container'>
      <header>
      	<h1>Here is my sample </h1>
      </header>
      <div id='main' role='main'>
      	<ul>
      		<li>List Item 1</li>
      		<li>List Item 2</li>
      		<li>List Item 3</li>
      		<li>
      			<button>Here is a button</button>
      			<button class="primary">Here is a button</button>
      			<button class="disabled">Here is a button</button>
 	      	</li>
      	</ul>
      	
      </div>
      <footer>
      	<button>Here is a button</button>
      	<button class="primary">Here is a button</button>
      	<button class="disabled">Here is a button</button>
      </footer>
    </div>
    <div class="changeCSS">
    	<button id="chgCSS" class="bigButton">Change CSS</button>
    </div>
    <script type="text/javascript" language="JavaScript" src="javascripts/jquery.min.js"></script>
    <script>
    	$('#chgCSS').click(function(){
    		var CSSvals = ['stylesheets/screen1.css', 'stylesheets/screen.css', 'stylesheets/screen2.css'],
    			setVal = ""; 
    		switch ($('#cssFile').attr('href')) {
    			case CSSvals[0]:
    				setVal = CSSvals[1];
    			break;
    			case CSSvals[1]:
    				setVal = CSSvals[2];
    			break;
    			default: 
    				setVal = CSSvals[0];
    			break;
    		}
    		$('#cssFile').attr('href',setVal);
    	})
    </script>
      
  </body>
 </html>
diff --git a/screen.scss b/screen.scss
 /* 

 Houses First Variation of Variables for Sample

 */



 $color1: #63bdd7;
 $color2: #9c4228;
 $fontcolor1: #333;
 $fontcolor2: #9c4228;
 $border-radius: 7px; 



 @import "basics"; //This command brings in file _basics.scss to consume these variables and output CSS
diff --git a/screen2.scss b/screen2.scss
 /* 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 "compass/reset";
 @import "compass/css3";
 @import "compass/layout";
 @import "compass/utilities";
 @import "compass/utilities/general/clearfix";
 @import "compass/css3/pie";
 @import "compass/css3/transform";


 //Uses Sass' color modifying functions to adjust colors

 $color1: #a9c4e5;
 $color2: darken($color1, 40); 
 $fontcolor1: darken($color1, 80);
 $fontcolor2: lighten($color1, 50);
 $border-radius: 4px;  


 @import "basics";
	body {
	text-align: center;
	> #container {
	text-align:left;
	margin:0 auto;
	width:500px;
	}
	}


	header {
	h1 {
	font-size:26px; margin-bottom:26px;
	}
	}
	div[role="main"] {
	@include background-image(linear-gradient(lighten($color1, 30%), lighten($color2, 30%)));
	@include border-radius($border-radius * 3.5, $border-radius * 3.5 );
	border:3px solid $color2;
	padding:$border-radius;
	margin-bottom:25px;

	ul {
	padding-top:14px;
	}
	li {
	color:$fontcolor1;
	margin-bottom:12px;
	}
	}

	button {
	//leverages the buttons mixin
	@include buttons();
	}
	/*

	Sample mixin which creates a button and the following states (based on classes):
	- primary
	- disabled

	(based on pseudo-selector)
	- :hover {}
	*/


	@mixin buttons($basicBorder:1px, $gradient1:#fff, $gradient2:#d8dee7){
	button{
	border:$basicBorder solid #acbed3;
	//brings in Compass' background-image mixin: http://compass-style.org/reference/compass/css3/images/
	@include background-image(linear-gradient($gradient1, $gradient2));
	padding:3px 14px;
	font-size:12px;
	color:#3b557d;
	//brings in Compass' border-radius mixin: http://compass-style.org/reference/compass/css3/border_radius/
	@include border-radius($border-radius, $border-radius);
	cursor:pointer;

	//& attribute adds

	&.primary {
	border:2px solid #3b557d;
	padding:5px 15px;
	//requires a $border-radius variable
	@include border-radius($border-radius + 2, $border-radius + 2);
	}
	&.disabled {
	opacity: .8;
	}
	&:hover {
	@include background-image(linear-gradient($gradient2, $gradient1));
	}
	}
	}
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
	<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
	<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
	<!--[if gt IE 8]><!-->
	<html class='no-js' lang='en'>
	<!--<![endif]-->
	<head>
	<meta charset='utf-8' />
	<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
	<title></title>
	<meta content='' name='description' />
	<meta content='' name='author' />
	<meta content='width=device-width, initial-scale=1.0' name='viewport' />

	<link id="cssFile" href='stylesheets/screen1.css' media='all' rel='stylesheet' />

	</head>
	<body>
	<div id='container'>
	<header>
	<h1>Here is my sample </h1>
	</header>
	<div id='main' role='main'>
	<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>
	<button>Here is a button</button>
	<button class="primary">Here is a button</button>
	<button class="disabled">Here is a button</button>
	</li>
	</ul>

	</div>
	<footer>
	<button>Here is a button</button>
	<button class="primary">Here is a button</button>
	<button class="disabled">Here is a button</button>
	</footer>
	</div>
	<div class="changeCSS">
	<button id="chgCSS" class="bigButton">Change CSS</button>
	</div>
	<script type="text/javascript" language="JavaScript" src="javascripts/jquery.min.js"></script>
	<script>
	$('#chgCSS').click(function(){
	var CSSvals = ['stylesheets/screen1.css', 'stylesheets/screen.css', 'stylesheets/screen2.css'],
	setVal = "";
	switch ($('#cssFile').attr('href')) {
	case CSSvals[0]:
	setVal = CSSvals[1];
	break;
	case CSSvals[1]:
	setVal = CSSvals[2];
	break;
	default:
	setVal = CSSvals[0];
	break;
	}
	$('#cssFile').attr('href',setVal);
	})
	</script>

	</body>
	</html>
	/*

	Houses First Variation of Variables for Sample

	*/



	$color1: #63bdd7;
	$color2: #9c4228;
	$fontcolor1: #333;
	$fontcolor2: #9c4228;
	$border-radius: 7px;



	@import "basics"; //This command brings in file _basics.scss to consume these variables and output CSS
	/* 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 "compass/reset";
	@import "compass/css3";
	@import "compass/layout";
	@import "compass/utilities";
	@import "compass/utilities/general/clearfix";
	@import "compass/css3/pie";
	@import "compass/css3/transform";


	//Uses Sass' color modifying functions to adjust colors

	$color1: #a9c4e5;
	$color2: darken($color1, 40);
	$fontcolor1: darken($color1, 80);
	$fontcolor2: lighten($color1, 50);
	$border-radius: 4px;


	@import "basics";