Skip to content

Instantly share code, notes, and snippets.

@nickcooley
Created December 5, 2011 03:28
Show Gist options
  • Save nickcooley/1432176 to your computer and use it in GitHub Desktop.
Save nickcooley/1432176 to your computer and use it in GitHub Desktop.
SASS Sample Files
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";
@a-laughlin
Copy link

Hey Nick,

Just saw your slideshare pres. What do you think about writing the parser in JavaScript and a style element into the page? That seems simpler and more portable than a Ruby-based solution.

Adam

@nickcooley
Copy link
Author

Hi Adam --

Thanks for your message. A couple of responses for you:

1.) Current best practice would have you separate content (html), presentation(css) and interaction(js) for the cleanest possible implementation

2.) Ruby is included with every new mac and with the way development patterns are going, I'd say that a large number of front-end developers are already on a mac. Although, I'm assuming you use a PC, given your concerns about portability

3.) There's a java-based parser application (I think I include this in a few of my slides,) which you can get from http://compass.handlino.com/ which makes the parsing completely painless…

As I didn't write (or contribute) to Sass (just an enthusiastic user,) I'd be hesitant to rewrite Sass as there's a LOT already there in the community (mixing, plugins, etc) which will make your life easier as a developer. However, if you find that a javascript parser works for you and your workflow, then by all means -- I say develop it!

@a-laughlin
Copy link

a-laughlin commented Jan 19, 2012 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment