public
Last active

SASS Sample Files

  • Download Gist
_basics.scss
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();
}
button.scss
Sass
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));
}
}
}
sample.html
HTML
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>
screen.scss
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
screen2.scss
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

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!

Thanks Nick,

The portability concern comes from years with nonprofits where we got old
or donated systems and frequently had to switch between them, so installing
anything meant re-installing on another system in the near future. As you
guessed, they were PCs. :)

Considering that HTML templating engines exist (e.g. Handlebars), I'm
surprised that no javascript CSS templating engines exist. They'd be handy
when prototyping with Backbone, though agreed that it's probably not worth
the effort of porting to JS.

Adam

On Wed, Jan 18, 2012 at 17:14, Nick Cooley <
reply@reply.github.com

wrote:

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!


Reply to this email directly or view it on GitHub:
https://gist.github.com/1432176

Adam Laughlin

Cambridge, MA
303-929-7880
LinkedIn http://www.linkedin.com/profile/view?id=11468038
Twitter http://twitter.com/a_laughlin
Google+ https://plus.google.com/107662649138779191300
a-laughlin.com

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.