Sass workflow & examples

directives.scss

@import "compass"; 

// Math Operators
// =, -, *, /, %

// 5em + 5em; 	// 2em
// 5em - 2em; 	// 3em
// 1in + 72pt; // 2in
// 6px * 100; 	// 600px
// 18	& 5; 	// 3

// A word on dividing
div {
	font: 24px / 2; 	// font-size / line-height
	font: (24px / 2); 	// 12px	
}

// Number Functions
// percentage()
// round()
// ceil()
// floor()
// abs()	

// Rational Operators - Numbers
// <, >, <=, >= 

// Comparison Operators - Data Types
// ==, !=


// Conditionals
// @if, @else, @else if
@mixin banner-box($gradient: 'none', $color: #efefef, $image: false ) {
    background-color: $color;
    border-color: darken($color, 18%);
    // section for linear or radial gradient
    @if $gradient == 'linear' {        
        @include background-image(linear-gradient(darken($color, 13%), $color, darken($color, 13%)));
    } @else if $gradient == 'radial' {
        @include background-image(radial-gradient($color, darken($color, 13%)));
    }
}

$theme: light;

body {
	@if $theme == light {
		background-color: #efefef;
		color: #333;
	} @else if $theme == dark {
		background-color: #333;
		color: #efefef;
	}
}

// @for loop
@for $column from 0 to 12 {
	.column-#{$column + 1} {
		width: 20px + ($column * 1);
	}
}

// @while loop
$column: 0;
@while $column < 12{
	.column-#{$column + 1} {
		width: 20px + ($column * 1);
	}
	$column: $column + 1;
}

// @each loop
$countries: us, uk, ar, ca;
@each $country in $countries {
	.#{$country}-icon {
		background: url('/images/#{$country}-icon.png');
	}
}

extend.scss

@import "compass"; 

.button {
    background-color: #ccc;
    background-clip: padding-box;
    border: 1px solid #999;
    @include border-radius(10px);
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    padding: 3px 20px;
    text-transform: lowercase;
    &:hover{
        border-color: #333;
        color: #000;
    }
}

.button-happy {
    @extend .button;
    background-color: yellow;
}

gistfile1.txt

These are the examples we ran through during our Sass Workflow meetup from from http://www.charlottefed.com. Feel free to add any comments or questions.

mixins.scss

@mixin button {
	background-color: #ccc;
	background-clip: padding-box;
	border: 1px solid #999;
	@include border-radius(10px);
	color: #333;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	padding: 3px 20px;
	text-transform: lowercase;
	&:hover{
		border-color: #333;
		color: #000;
	}
}
.button, .link {
	@include button
}

// A little more customizable
@mixin button ($color) {
	background-color: $color;
	background-clip: padding-box;
	border: 1px solid darken($color, 10%);
	@include border-radius(10px);
	color: darken($color, 60%);
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	padding: 3px 20px;
	text-transform: lowercase;
	&:hover{
		border-color: darken($color, 50%);
		color: darken($color, 100%);
	}
}
button {
	@include button(red);
}

// Some more fun
@mixin shadow($shadow, $color: '#000') {
    @if $shadow == 'drop-shadow' {
       &:before, &:after{
            @include border-radius(20px);
            content: "";
            position: absolute;
            z-index: -1;
        }
        &:before{
            @include box-shadow($color 0 0 15px 3px);        
            bottom: -2px;
            right: -2px;
            left: -2px;        
        }
        &:after{
            @include box-shadow($color 0 0 5px 2px);
            bottom: 0px;
            right: 6px;
            left: 6px;
        } 
    } @else if $shadow == 'glow'{
        @include box-shadow($color 0 0 10px 0, #fff 0 0 0 1px inset);
    }
}
.box{
	background-color: #ccc;
	height: 100px;
	position: aboslute;
	width: 100px;
	@include box-shadow('drop-shadow', '#efefef')
}

// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
//     @include arrow(top, #000, 50px);   
// }
@mixin arrow($direction, $color, $size){
    display: block;
    height: 0;
    width: 0;
    
    @if $direction == 'top' {
        border-left: $size solid transparent;
    	border-right: $size solid transparent;
    	border-bottom: $size solid $color;
    } @else if $direction == 'right' {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
    	border-left: $size solid $color;
    } @else if $direction == 'bottom' {
        border-top: $size solid $color;
        border-right: $size solid transparent;
        border-left: $size solid transparent;
    } @else if $direction == 'left' {
        border-top: $size solid transparent;
    	border-right: $size solid $color;
    	border-bottom: $size solid transparent;
    } @else if $direction == 'top-left' {
        border-top: $size solid $color; 
        border-right: $size solid transparent;	
    } @else if $direction == 'top-right' {
        border-top: $size solid $color; 
        border-left: $size solid transparent;
    } @else if $direction == 'bottom-left' {
        border-bottom: $size solid $color; 
        border-right: $size solid transparent;	
    } @else if $direction == 'bottom-right' {
        border-bottom: $size solid $color; 
        border-left: $size solid transparent;
    }
}
nav {
	li {
		@include arrow(right, blue, 20px)
	}
}

nesting.scss

// Nesting Rules
nav {
	display: block;
	ul {
		margin-bottom: 2em;
	}
	li {
		background: linear-gradient(#ccc, #222);
		border-right: 1px solid #000;
		display: inline-block;
		// Parent Selectors
		&:last-child {
			border-right: 0;
		}
		.ie6 & {
			float: left;
		}
		// Fabulous with Modernizr
		.no-cssgradients & {
			background-color: #ccc;
		}
	}
	a {
		color: red;
		display: block;
	}
}

variables.scss

// Variables
// - Colors, Numbers or Text
// - Smart with Units

$color: black;
$color-alt: gray;
$color-alt2: red;

$color-accent: blue;
$color-accent-alt: purple;

$color-link: white;
$color-link-hover: darken($color-link, 51%);

$corner-radius: 10px;
$corner-radius2: 5px + 2;
$container-width: 960px;


a {
	border-radius: $corner-radius2;
	color: $color-link;
	&:hover {
		color: $color-link-hover;
	}
}