<commit_before><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Sexy Style Sheets with Sass (and Compass)</title>

	<meta name="description" content="A brief overview of the Sass style sheet preprocessor and the Compass framework for Sass.">
	<meta name="author" content="<NAME>">
	<meta name="viewport" content="width=1024, user-scalable=no">

	<!-- Core and extension CSS files -->
	<link rel="stylesheet" href="deckjs/core/deck.core.css">
	<link rel="stylesheet" href="deckjs/extensions/menu/deck.menu.css">
	<link rel="stylesheet" href="deckjs/extensions/navigation/deck.navigation.css">
	<link rel="stylesheet" href="deckjs/extensions/status/deck.status.css">

	<!-- Style theme. -->
	<link rel="stylesheet" href="deckjs/themes/style/swiss.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/prettify.css">

	<!-- Transition theme. -->
	<link rel="stylesheet" href="deckjs/themes/transition/horizontal-slide.css">

	<script src="deckjs/js/modernizr.custom.js"></script>
</head>

<body class="deck-container">

<!-- Begin slides -->

<section class="slide" id="title-slide">
	<h1>Sexy Style Sheets with Sass</h1>
	<h2>(and Compass)</h2>
</section>


<section class="slide" id="cssproblems">
	<h2>What's the problem with CSS?</h2>
	<ul>
		<li class="slide" id="css-problem-one">
			<h3>Static</h3>
			<p>No programmatic capabilities</p>
		</li>
		<li class="slide" id="css-problem-two">
			<h3>Repetition</h3>
			<p>Constantly repeating key colors, values, bits of style</p>
		</li>
		<li class="slide" id="css-problem-three">
			<h3>Vendor prefixes</h3>
			<p>New features are prefixed, and often have varying syntaxes</p>
		</li>
		<li class="slide" id="css-problem-three">
			<h3>Just to name a few...</h3>
		</li>
	</ul>
</section>


<section class="slide" id="sass-one">
	<h2>How can Sass help?</h2>
	<ul>
		<li class="slide" id="extending-css">
			<h3>Sass (and other preprocessors) extend and improve CSS</h3>
			<p>They're technically "meta-languages"</p>
		</li>
		<li class="slide" id="programmatic">
			<h3>Sass provides programmatic capabilities</h3>
			<p>Variables, math, functions, basic scripting</p>
		</li>
		<li class="slide" id="dry">
			<h3>Sass introduces new syntax</h3>
			<p>Stop repeating yourself with nesting and extending</p>
		</li>
		<li class="slide" id="compilation">
			<h3>Sass compiles to CSS</h3>
			<p>It replaces CSS in your workflow, but is compiled to CSS for production</p>
		</li>
	</ul>
</section>


<section class="slide" id="sass-features">
	<h2>Sass Features</h2>
	<ul>
		<li>
			<h3>Variables</h3>
		</li>
		<li>
			<h3>Math</h3>
		</li>
		<li>
			<h3>Helpers</h3>
		</li>
		<li>
			<h3>Nesting</h3>
		</li>
		<li>
			<h3>Mixins</h3>
		</li>
		<li>
			<h3>Inheritance/Extending</h3>
		</li>
		<li class="slide" id="individually">
			<h3>Let's look at these features individually....</h3>
		</li>
	</ul>
</section>


<section class="slide" id="sass-variables-before">
	<h2>Variables</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">$blue: #3bbfce;
$margin: 16px;
$sans-serif: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;

div {
	color: $blue;
	font: 16px 'Museo Sans', $sans-serif;
	margin: $margin;
}</code></pre></p>
</section>


<section class="slide" id="sass-variables-after">
	<h2>Variables</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">div {
  color: #3bbfce;
  font: 16px "Museo Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
  margin: 16px;
}</code></pre></p>
</section>


<section class="slide" id="sass-math">
	<h2>Math</h2>
	<h3>Math</h3>
	<p><pre><code class="prettyprint">div {
	width: 300px - (8px + 8px);
	padding: 8px;
	margin: $margin;
}</code></pre></p>
	<h3>Math with variables</h3>
	<p><pre><code class="prettyprint">$margin: 16px;

div {
	width: 300px - $margin;
	padding: $margin / 2;
	margin: $margin;
}</code></pre></p>
</section>


<section class="slide" id="sass-math-after">
	<h2>Math</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">div {
  width: 284px;
  padding: 8px;
  margin: 16px;
}</code></pre></p>
</section>


<section class="slide" id="sass-helpers">
	<h2>Helpers/Sass Functions</h2>
	<h3>Color functions</h3>
	<ul>
		<div class="slide" id="color-funcs">
			<li>
				<p>adjust-hue()</p>
			</li>
			<li>
				<p>lighten()</p>
			</li>
			<li>
				<p>darken()</p>
			</li>
			<li>
				<p>saturate()</p>
			</li>
			<li>
				<p>grayscale()</p>
			</li>
			<li>
				<p>invert()</p>
			</li>
		</div>
		<li class="slide" id="more-sass-helpers">
			<p>For even more, see the <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html">Sass documentation</a>.</p>
		</li>
	</ul>
</section>


<section class="slide" id="sass-helpers-in-practice">
	<h2>Helpers/Sass Functions</h2>
	<p><pre><code class="prettyprint">a {
	color: #0000FF;
}

a:hover, a:visited:hover {
	color: darken(#0000FF, 10%);
}

a:visited {

	color: darken(#0000FF, 5%);
}

a:active {
	color: lighten(#0000FF, 10%);
}</code></pre></p>
</section>


<section class="slide" id="sass-helpers-in-practice-2">
	<h2>Helpers/Sass Functions</h2>
	<p><pre><code class="prettyprint">$link-color: #0000FF;

a {
	color: $link-color;
}

a:hover, a:visited:hover {
	color: darken($link-color, 10%);
}

a:visited {
	color: darken($link-color, 5%);
}

a:active {
	color: lighten($link-color, 10%);
}</code></pre></p>
</section>


<section class="slide" id="sass-helpers-in-practice-3">
	<h2>Helpers/Sass Functions</h2>
	<p><pre><code class="prettyprint">a {
  color: blue;
}

a:hover, a:visited:hover {
  color: #0000cc;
}

a:visited {
  color: #0000e6;
}

a:active {
  color: #3333ff;
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-1">
	<h2>Nesting</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">table.hl {
	margin: 2em 0;

	td.ln {
		text-align: right;
	}
}

li {
	font: {
		family: serif;
		weight: bold;
		size: 1.2em;
	}
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-2">
	<h2>Nesting</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-3">
	<h2>Nesting</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">$link-color: #0000FF;

a {
	color: $link-color;

	&:hover, &:visited:hover {
		color: darken($link-color, 10%);
	}

	&:visited {
		color: darken($link-color, 5%);
	}

	&:active {
		color: lighten($link-color, 10%);
	}
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-4">
	<h2>Nesting</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">a {
  color: blue;
}
a:hover, a:visited:hover {
  color: #0000cc;
}
a:visited {
  color: #0000e6;
}
a:active {
  color: #3333ff;
}</code></pre></p>
</section>


<section class="slide" id="sass-mixins">
	<h2>Mixins</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">@mixin opacity($amount) {
	filter: progid:DXImageTransform.Microsoft.<br>Alpha(Opacity=#{$amount * 100});
	opacity: $amount;
}

a {
	@include opacity(0.2);
}</code></pre></p>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">a {
  filter: progid:DXImageTransform.Microsoft.<br>Alpha(Opacity=20);
  opacity: 0.2;
}</code></pre></p>
</section>


<section class="slide" id="sass-mixins-2">
	<h2>Mixins</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">@mixin image-replacement() {
	text-indent: -9999em;
	overflow: hidden;
}

a {
	@include image-replacement();
}</code></pre></p>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">a {
	text-indent -9999em;
	overflow: hidden;
}</code></pre></p>
</section>


<section class="slide" id="sass-extends">
	<h2>Extending and inheritance</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">.box {
	border: 2px solid black;
	margin: 1em;
}

.important-box {
	@extends .box;
	background-color: #CCC;
	padding-left: 48px;
}

.error-box {
	@extends .important-box;
	background-color: #FFF;
}</code></pre></p>
</section>


<section class="slide" id="sass-extends-out">
	<h2>Extending and inheritance</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">.box, .important-box, .error-box {
	border: 2px solid black;
	margin: 1em;
}

.important-box, .error-box {
	background-color: #CCC;
	padding-left: 48px;
}

.error-box {
	background-color: #FCC;
}</code></pre></p>
</section>


<section class="slide" id="phew">
	<h1>PHEW!<br>That's a lot.</h1>
</section>


<section class="slide" id="why-sass">
	<h2>So why Sass? Why not Less/Stylus/etc?</h2>
	<ul>
		<li class="slide" id="why-sass-1">
			<h3>CSS3 is borrowing from Sass</h3>
			<p>See <a href="http://dev.w3.org/csswg/css3-hierarchies/">nesting spec</a></p>
		</li>
		<li class="slide" id="why-sass-2">
			<h3>Smarter, more extensible syntax</h3>
		</li>
		<li class="slide" id="why-sass-3">
			<h3>Compass.</h3>
			<p>Compass will <em>blow your mind</em>.</p>
		</li>
	</ul>
</section>


<section class="slide" id="compass">
	<h2>Compass</h2>
	<p>Compass is a framework built on Sass, offering curated mixins and additional functionality.</p>
	<h3>Like what?</h3>
	<ul>
		<li class="slide" id="what-is-compass-1">
			<p>A full range of pre-built CSS3 mixins</p>
		</li>
		<li class="slide" id="what-is-compass-2">
			<p>Intelligent URL handlers for making asset management a breeze</p>
		</li>
		<li class="slide" id="what-is-compass-3">
			<p>Callbacks so you can do "stuff" on compilation</p>
		</li>
		<li class="slide" id="what-is-compass-4">
			<p>Automatic image generation (sprites and more)</p>
		</li>
		<li class="slide" id="what-is-compass-5">
			<p>and that's just the start!</p>
		</li>
	</ul>
</section>



<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a>

<!-- deck.status snippet -->
<p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p>

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="deckjs/js/jquery-1.7.min.js"><\/script>')</script>

<!-- Deck Core and extensions -->
<script src="deckjs/core/deck.core.js"></script>
<script src="deckjs/extensions/hash/deck.hash.js"></script>
<script src="deckjs/extensions/menu/deck.menu.js"></script>
<script src="deckjs/extensions/status/deck.status.js"></script>
<script src="deckjs/extensions/navigation/deck.navigation.js"></script>
<script src="js/prettify.js"></script>
<script src="js/lang-css.js"></script>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide');
	prettyPrint();
});
</script>

</body>
</html><commit_msg>Condensing condensing condensing<commit_after><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Sexy Style Sheets with Sass (and Compass)</title>

	<meta name="description" content="A brief overview of the Sass style sheet preprocessor and the Compass framework for Sass.">
	<meta name="author" content="<NAME>">
	<meta name="viewport" content="width=1024, user-scalable=no">

	<!-- Core and extension CSS files -->
	<link rel="stylesheet" href="deckjs/core/deck.core.css">
	<link rel="stylesheet" href="deckjs/extensions/menu/deck.menu.css">
	<link rel="stylesheet" href="deckjs/extensions/navigation/deck.navigation.css">
	<link rel="stylesheet" href="deckjs/extensions/status/deck.status.css">

	<!-- Style theme. -->
	<link rel="stylesheet" href="deckjs/themes/style/swiss.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/prettify.css">

	<!-- Transition theme. -->
	<link rel="stylesheet" href="deckjs/themes/transition/horizontal-slide.css">

	<script src="deckjs/js/modernizr.custom.js"></script>
</head>

<body class="deck-container">

<!-- Begin slides -->

<section class="slide" id="title-slide">
	<h1>Sexy Style Sheets with Sass</h1>
	<h2>(and Compass)</h2>
</section>


<section class="slide" id="cssproblems">
	<h2>What's the problem with CSS?</h2>
	<ul>
		<li class="slide" id="css-problem-one">
			<h3>Static</h3>
			<p>No programmatic capabilities</p>
		</li>
		<li class="slide" id="css-problem-two">
			<h3>Repetition</h3>
			<p>Constantly repeating key colors, values, bits of style</p>
		</li>
		<li class="slide" id="css-problem-three">
			<h3>Vendor prefixes</h3>
			<p>New features are prefixed, and often have varying syntaxes</p>
		</li>
		<li class="slide" id="css-problem-three">
			<h3>Just to name a few...</h3>
		</li>
	</ul>
</section>


<section class="slide" id="sass-one">
	<h2>How can Sass help?</h2>
	<ul>
		<li class="slide" id="extending-css">
			<h3>Sass (and other preprocessors) extend and improve CSS</h3>
			<p>They're technically "meta-languages"</p>
		</li>
		<li class="slide" id="programmatic">
			<h3>Sass provides programmatic capabilities</h3>
			<p>Variables, math, functions, basic scripting</p>
		</li>
		<li class="slide" id="dry">
			<h3>Sass introduces new syntax</h3>
			<p>Stop repeating yourself with nesting and extending</p>
		</li>
		<li class="slide" id="compilation">
			<h3>Sass compiles to CSS</h3>
			<p>It replaces CSS in your workflow, but is compiled to CSS for production</p>
		</li>
	</ul>
</section>


<section class="slide" id="sass-features">
	<h2>Sass Features</h2>
	<ul>
		<li>
			<h3>Variables</h3>
		</li>
		<li>
			<h3>Math</h3>
		</li>
		<li>
			<h3>Helpers</h3>
		</li>
		<li>
			<h3>Nesting</h3>
		</li>
		<li>
			<h3>Mixins</h3>
		</li>
		<li>
			<h3>Inheritance/Extending</h3>
		</li>
	</ul>
</section>


<section class="slide" id="sass-variables">
	<h2>Variables</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">$blue: #3bbfce;
$margin: 16px;
$sans-serif: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

div {
	color: $blue;
	font: 16px 'Museo Sans', $sans-serif;
	margin: $margin;
}</code></pre></p>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">div {
  color: #3bbfce;
  font: 16px "Museo Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin: 16px;
}</code></pre></p>
</section>


<section class="slide" id="sass-math">
	<h2>Math</h2>
	<h3>Math</h3>
	<p><pre><code class="prettyprint">div {
	width: 300px - (8px + 8px);
	padding: 8px;
	margin: $margin;
}</code></pre></p>
	<h3>Math with variables</h3>
	<p><pre><code class="prettyprint">$margin: 16px;

div {
	width: 300px - $margin;
	padding: $margin / 2;
	margin: $margin;
}</code></pre></p>
</section>


<section class="slide" id="sass-math-after">
	<h2>Math</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">div {
  width: 284px;
  padding: 8px;
  margin: 16px;
}</code></pre></p>
</section>


<section class="slide" id="sass-helpers">
	<h2>Helpers/Sass Functions</h2>
	<h3>Color functions</h3>
	<ul>
		<div class="slide" id="color-funcs">
			<li>
				<p>adjust-hue()</p>
			</li>
			<li>
				<p>lighten()</p>
			</li>
			<li>
				<p>darken()</p>
			</li>
			<li>
				<p>saturate()</p>
			</li>
			<li>
				<p>grayscale()</p>
			</li>
			<li>
				<p>invert()</p>
			</li>
		</div>
		<li class="slide" id="more-sass-helpers">
			<p>For even more, see the <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html">Sass documentation</a>.</p>
		</li>
	</ul>
</section>


<section class="slide" id="sass-helpers-in-practice">
	<h2>Helpers/Sass Functions</h2>
	<p><pre><code class="prettyprint">a {
	color: #0000FF;
}

a:hover, a:visited:hover {
	color: darken(#0000FF, 10%);
}

a:visited {

	color: darken(#0000FF, 5%);
}

a:active {
	color: lighten(#0000FF, 10%);
}</code></pre></p>
</section>


<section class="slide" id="sass-helpers-in-practice-2">
	<h2>Helpers/Sass Functions</h2>
	<p><pre><code class="prettyprint">$link-color: #0000FF;

a {
	color: $link-color;
}

a:hover, a:visited:hover {
	color: darken($link-color, 10%);
}

a:visited {
	color: darken($link-color, 5%);
}

a:active {
	color: lighten($link-color, 10%);
}</code></pre></p>
</section>


<section class="slide" id="sass-helpers-in-practice-3">
	<h2>Helpers/Sass Functions</h2>
	<p><pre><code class="prettyprint">a {
  color: blue;
}

a:hover, a:visited:hover {
  color: #0000cc;
}

a:visited {
  color: #0000e6;
}

a:active {
  color: #3333ff;
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-1">
	<h2>Nesting</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">table.hl {
	margin: 2em 0;

	td.ln {
		text-align: right;
	}
}

li {
	font: {
		family: serif;
		weight: bold;
		size: 1.2em;
	}
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-2">
	<h2>Nesting</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-3">
	<h2>Nesting</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">$link-color: #0000FF;

a {
	color: $link-color;

	&:hover, &:visited:hover {
		color: darken($link-color, 10%);
	}

	&:visited {
		color: darken($link-color, 5%);
	}

	&:active {
		color: lighten($link-color, 10%);
	}
}</code></pre></p>
</section>


<section class="slide" id="sass-nesting-4">
	<h2>Nesting</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">a {
  color: blue;
}
a:hover, a:visited:hover {
  color: #0000cc;
}
a:visited {
  color: #0000e6;
}
a:active {
  color: #3333ff;
}</code></pre></p>
</section>


<section class="slide" id="sass-mixins">
	<h2>Mixins</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">@mixin opacity($amount) {
	filter: progid:DXImageTransform.Microsoft.<br>Alpha(Opacity=#{$amount * 100});
	opacity: $amount;
}

a {
	@include opacity(0.2);
}</code></pre></p>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">a {
  filter: progid:DXImageTransform.Microsoft.<br>Alpha(Opacity=20);
  opacity: 0.2;
}</code></pre></p>
</section>


<section class="slide" id="sass-mixins-2">
	<h2>Mixins</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">@mixin image-replacement() {
	text-indent: -9999em;
	overflow: hidden;
}

a {
	@include image-replacement();
}</code></pre></p>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">a {
	text-indent -9999em;
	overflow: hidden;
}</code></pre></p>
</section>


<section class="slide" id="sass-extends">
	<h2>Extending and inheritance</h2>
	<h3>Input...</h3>
	<p><pre><code class="prettyprint">.box {
	border: 2px solid black;
	margin: 1em;
}

.important-box {
	@extends .box;
	background-color: #CCC;
	padding-left: 48px;
}

.error-box {
	@extends .important-box;
	background-color: #FFF;
}</code></pre></p>
</section>


<section class="slide" id="sass-extends-out">
	<h2>Extending and inheritance</h2>
	<h3>Output...</h3>
	<p><pre><code class="prettyprint">.box, .important-box, .error-box {
	border: 2px solid black;
	margin: 1em;
}

.important-box, .error-box {
	background-color: #CCC;
	padding-left: 48px;
}

.error-box {
	background-color: #FCC;
}</code></pre></p>
</section>


<section class="slide" id="phew">
	<h1>PHEW!<br>That's a lot.</h1>
</section>


<section class="slide" id="why-sass">
	<h2>So why Sass? Why not Less/Stylus/etc?</h2>
	<ul>
		<li class="slide" id="why-sass-1">
			<h3>CSS3 is borrowing from Sass</h3>
			<p>See <a href="http://dev.w3.org/csswg/css3-hierarchies/">nesting spec</a></p>
		</li>
		<li class="slide" id="why-sass-2">
			<h3>Smarter, more extensible syntax</h3>
		</li>
		<li class="slide" id="why-sass-3">
			<h3>Compass.</h3>
			<p>Compass will <em>blow your mind</em>.</p>
		</li>
	</ul>
</section>


<section class="slide" id="compass">
	<h2>Compass</h2>
	<p>Compass is a framework built on Sass, offering curated mixins and additional functionality.</p>
	<h3>Like what?</h3>
	<ul>
		<li class="slide" id="what-is-compass-1">
			<p>A full range of pre-built CSS3 mixins</p>
		</li>
		<li class="slide" id="what-is-compass-2">
			<p>Intelligent URL handlers for making asset management a breeze</p>
		</li>
		<li class="slide" id="what-is-compass-3">
			<p>Callbacks so you can do "stuff" on compilation</p>
		</li>
		<li class="slide" id="what-is-compass-4">
			<p>Automatic image generation (sprites and more)</p>
		</li>
		<li class="slide" id="what-is-compass-5">
			<p>and that's just the start!</p>
		</li>
	</ul>
</section>



<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a>

<!-- deck.status snippet -->
<p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p>

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="deckjs/js/jquery-1.7.min.js"><\/script>')</script>

<!-- Deck Core and extensions -->
<script src="deckjs/core/deck.core.js"></script>
<script src="deckjs/extensions/hash/deck.hash.js"></script>
<script src="deckjs/extensions/menu/deck.menu.js"></script>
<script src="deckjs/extensions/status/deck.status.js"></script>
<script src="deckjs/extensions/navigation/deck.navigation.js"></script>
<script src="js/prettify.js"></script>
<script src="js/lang-css.js"></script>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide');
	prettyPrint();
});
</script>

</body>
</html>
{'fraction_non_alphanumeric': 0.22774915615562266, 'fraction_numerical': 0.025404157043879907, 'mean_word_length': 4.215890664813528, 'pattern_counts': {'":': 0, '<': 957, '<?xml version=': 0, '>': 955, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2578988', 'n_tokens_mistral': 9976, 'n_tokens_neox': 9159, 'n_words': 1810}