SASS sample

gistfile1.scss

/* sass test main.scss */

// this comment is sass code only

@import "global";
@import "function";

#main {
	width: 90%;
	background: url("#{$imgDir}bg.png");
	// background: url($imgDir + "bg.png");
	p {
		fonst-size: $baseFontSize;
		color: $brandColor;
		a{
			text-decoration: none;
			&:hover {
				font-weight: bold;
			}
		}

		.sub {
			font-size: $baseFontSize - 2px;
		}
	}
}

#menu {
	@if $debugMode == true {
		color: red;
	} @else {
		color: blue;
	}
}

@for $i from 10 through 15 {
	.fs#{$i} { font-size: #{$i}px; }
}

$i: 10;
@while $i <= 100 {
	.box#{$i} {
		width: #{$i + 0%};
		height: #{$i + 0%};
	}
	$i: $i + 10;
}

$animals: cat, dog, tiger;
@each $animal in $animals {
	.#{$animal}-icon {
		background: url("#{$animal}.png");
	}
}

.grid {
	float: left;
	width: getColumnWidth($totalWidth,$columnCount);
}

// mixin test
@mixin round($radius:4px) {
	border-radius: $radius;
}

.label {
	font-size: 12px;
	@include round(10px);
}

// extend test

.msg {
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px;
	color: white;
}

.errorMsg {
	@extend .msg;
	background: red;
}

.warningMsg {
	@extend .msg;
	background: orange;
}

/* _global.scss  */
$debugMode: false;

$imgDir: "../img/";
$baseFontSize: 14px;
$brandColor: rgba(255,0,0,0.9);

$totalWidth: 940px;
$columnCount: 10;

/* _function.scss  */
// make function
@function getColumnWidth($width,$count) {
	$padding: 10px;
	$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
	@debug $columnWidth;
	@return $columnWidth;
}