Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

SASS Sample Files

View _basics.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
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();
}
View _basics.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
/*
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));
}
}
}
View _basics.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
<!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>
View _basics.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
/*
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
View _basics.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
/* 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";

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

Owner

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.