1. SASS

2. CSS + Convenient Shortcuts

3. A Simple Example

4. a { color: #f00; text-decoration: none; font-weight: bold; }
CSS
a {
color: #f00;
text-decoration: none;
font-weight: bold; }

5. a { color: #f00; text-decoration: none; font-weight: bold; }
SASS
a {
color: #f00;
text-decoration: none;
font-weight: bold; }

6. Gosh, That
Was Tough

7. Intermission

8. 1. Variables

9. Say we have a link, heading and a button.

10. CSS a { color: #f00; text-decoration: none; } h2 { font-size: 130%;
.button {
background: #f00;
color: #fff;

11. CSS a, h2 { color: #f00; } a { text-decoration: none; h2 {
font-size: 130%;
.button {
background: #f00; /* This sucks. */
color: #fff;

12. CSS .red { color: #f00; } a { text-decoration: none; h2 {
font-size: 130%;
.button {
background: #f00;
color: #fff;
<h2 class=”red”>The Litany</h2>
<p>I must not fear.</p>
<p>Fear is the mind-killer.</p>
<p>I will <a class=”red” href=” my fear.</a></p>
<p>I will let it pass through me.</p>
<input class=”button” value=”Post this to your LiveJournal” type=”submit” />

13. SASS $highlightColor: #f00; a { color: $highlightColor;
text-decoration: none; }
h2 {
font-size: 130%;
.button {
background: $highlightColor;
color: #fff;

14. Wow

15. So Anyway.

16. 2. Nesting

17. CSS .carousel { overflow: hidden; width: 250px; } .carousel ul.items {
position: relative; }
.carousel ul.items li {
display: block; position: absolute;
width: 250px; left: -250px;
.carousel ul.items li a:link, .carousel ul.items li a:visited {
display: block; height: 50px;
.carousel ul.items li a:hover, .carousel ul.items li a:active {
opacity: 0.8;

18. SASS .carousel { overflow: hidden; width: 250px; ul.items {
position: relative;
li {
display: block; position: absolute;
width: 250px; left: -250px;
a {
&:link, &:visited { display: block; height: 50px; }
&:hover, &:active { display: block; height: 50px; } }

19. 3. Mixins

20. CSS #about-us ul.options li { background-color: #fff;
border-radius: 5px; }
#search-results ul.products li {
border-radius: 5px;
background-image: url('/images/product/list/results.top.png');
background-repeat: repeat-x; }
/* ... */
#navigation {

21. SASS @mixin redballoon-outline-box { background-color: #fff;
border-radius: 5px; }
/* ... */
#about-us ul.options li redballoon-outline-box; }
#navigation redballoon-outline-box; }
#search-results ul.products li {
@include redballoon-outline-box;
background-image: url('/images/product/list/results.top.png');
background-repeat: repeat-x; }

22. Sure. Just break it into a CSS class instead, though.

23. CSS
<div id=”about-us”> <ul class=”options”><li class=”redballoon-outline-box red”>...</li></ul>
</div>
<ul id=”navigation” class=”redballoon-outline-box”>
<li class=”red”>...</li>
</ul>
<div id=”search-results”>
<ul class=”products”>
<li class=”redballoon-outline-box”>...</li>

24. SASS
<div id=”about-us”> <ul class=”options”><li>...</li></ul>
</div>
<ul id=”navigation”>
<li>...</li>
</ul>
<div id=”search-results”>
<ul class=”products”>

25. COMPASS

26. Convenient way to compile and keep Sass files together

27. +

28. Bunch of pre-written mixins

29. (including CSS3, colour-manipulation, resets, and spriting)

30. Demo Time