1. Sass/Compass
HTML5/CSS3 Rapid Prototyping Tools

2. Who is this guy?
Nick Cooley
Principal Front-End Architect,
TandemSeven:
http://www.tandemseven.com
@nickcooley

3. Why Use a CSS
Framework?
• Instead of repetitively implementing
patterns and values, you can
modularize your CSS.
• CSS is limited and difficult to extend
by itself.
• When prototyping, shouldn’t you
focus more on the, you know,
prototyping?

4. DRY

5. DRY
• “Don’t Repeat Yourself”
• Fundamental best practice of CSS
frameworks

6. Sass
• What is Sass?
• Nesting
• Vars
• Mixins

7. Compass
• Save Time!
• X-Browser CSS3 mixins
• Provides Common CSS development
Patterns in an easy-to-use-format

8. Let’s Talk About
Sass

9. What is Sass?
• Stands for “Syntactically Awesome
StyleSheets”
• “Sass both provides a simpler, more
elegant syntax for CSS and
implements various features that
are useful for creating manageable
stylesheets.”
• Ruby Based

10. Sass: Nesting

11. Sass: Nesting
• CSS: in order to contextually apply
selectors, you might need to repeat
selectors.
• This can be Repetitive, potentially
messy and confusing

12. Sass: Nesting
•Sass: Allows you to
nest selectors
within a parent
selector.
•This provides an
approach that’s
clean, concise,
unique and DRY

13. Sass: Variables

14. Sass: Variables
• Allow you to quickly parameterize
your CSS
• Create diverse variations in
seconds!
• Helps you create design standards
for your CSS.
• Using a main color in a number of

15. Sass: Variables
• Imagine you are using a color as a
theme throughout your CSS.
• Imagine the $color1 variable spread
all over your CSS? How easy to

16. Sass: Mixins

17. Sass: Mixins
• Mixins:Sass :: Functions:Javascript
• Allow you to define patterns for
reuse
• Mixins can be imported across
projects, helping you to create your
own framework

18. Sass: Mixins
• Imagine the following case: You
have a standard button theme you
use across your site. It has:
• Rounded Corners
• Gradients
• Drop Shadows (multiple)
• What would the CSS for such a
button look like?

19. Sass: Mixins
div[role="main"] li button {
border: 1px solid #d8dee7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d8dee7));
background-image: -webkit-linear-gradient(#ffffff, #d8dee7);
background-image: -moz-linear-gradient(#ffffff, #d8dee7);
background-image: -o-linear-gradient(#ffffff, #d8dee7);
background-image: -ms-linear-gradient(#ffffff, #d8dee7);
background-image: linear-gradient(#ffffff, #d8dee7);
padding: 3px 14px;
font-size: 12px;
color: #3b557d;
-webkit-border-radius: 20px 20px;
-moz-border-radius: 20px / 20px;
-o-border-radius: 20px / 20px;
-ms-border-radius: 20px / 20px;
-khtml-border-radius: 20px / 20px;
border-radius: 20px / 20px;
cursor: pointer;
}
div[role="main"] li button.primary {
border: 2px solid #3b557d;
padding: 5px 15px;
-webkit-border-radius: 22px 22px;
-moz-border-radius: 22px / 22px;
-o-border-radius: 22px / 22px;
-ms-border-radius: 22px / 22px;
-khtml-border-radius: 22px / 22px;
border-radius: 22px / 22px;
}
div[role="main"] li button.disabled {
opacity: .8;
}
div[role="main"] li button:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d8dee7), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(#d8dee7, #ffffff);
background-image: -moz-linear-gradient(#d8dee7, #ffffff);
background-image: -o-linear-gradient(#d8dee7, #ffffff);
background-image: -ms-linear-gradient(#d8dee7, #ffffff);
background-image: linear-gradient(#d8dee7, #ffffff);
}

20. Compass

21. What is Compass?
• “...open-source CSS authoring
framework which uses the Sass
stylesheet language to make writing
stylesheets powerful and easy.”
• Provides a number of community-
created mixins and modules to help
integrate some of the most popular
design patterns on the web.

22. Compass
• X-Browser CSS3 mixins
• Rounded Corners • Box Shadow
• Gradients • Text Shadow
• Common CSS development Patterns
• Reset.css • Sprites
• Clearfix • Web Fonts
• CSS3 Pie • More!

23. Compass
button {
border:1px solid #acbed3;
@include background-image(linear-gradient(#fff, #d8dee7));
padding:3px 14px;
font-size:12px;
color:#3b557d;
@include border-radius(7px, 7px);
cursor:pointer;
&.primary { border:2px solid #3b557d;
padding:5px 15px;
@include border-radius(9px, 9px);
}
&.disabled {
opacity: .8;
}
&:hover {
@include background-image(linear-gradient(#d8dee7, #fff));
}
}

24. Compass
button {
border:1px solid #acbed3;
@include background-image(linear-gradient(#fff, #d8dee7));
padding:3px 14px;
font-size:12px;
color:#3b557d;
@include border-radius(7px, 7px);
cursor:pointer;
&.primary { border:2px solid #3b557d;
padding:5px 15px;
@include border-radius($border-radius+2, $border-radius+2); }
&.disabled {
opacity: .8;
}
&:hover {
@include background-image(linear-gradient(#d8dee7, #fff));
}
}

25. Compass
• Instead of:
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d8dee7));
background-image: -webkit-linear-gradient(#ffffff, #d8dee7);
background-image: -moz-linear-gradient(#ffffff, #d8dee7);
background-image: -o-linear-gradient(#ffffff, #d8dee7);
background-image: -ms-linear-gradient(#ffffff, #d8dee7);
background-image: linear-gradient(#ffffff, #d8dee7);
• Compass Provides a mixin for gradients:
@include background-image(linear-gradient(#d8dee7, #fff));
• Instead of:
-webkit-border-radius: 20px 20px;
-moz-border-radius: 20px / 20px;
-o-border-radius: 20px / 20px;
-ms-border-radius: 20px / 20px;
-khtml-border-radius: 20px / 20px;
border-radius: 20px / 20px;
• Compass Provides a mixin for border-radius:
@include border-radius(20px, 20px);

26. How do I use?
• Both Sass and Compass are ruby-
based applications.
• Most users use the terminal to run
their instances
• If you don’t want to install Ruby or
hate command line...

27. Compass.app
• Java Based
• Available for Windows/Mac/Linux
• A number of extensions: HTML5
Boilerplate, Blueprint, 960, and
more!
• No command line!

28. Demo

29. Links
• Sample files: https://gist.github.com/1432176
• Sass Site: http://www.sass-lang.com
• Compass Site: http://compass-style.org
• Compass.app Site:
http://compass.handlino.com/
• Manning Sass Book:
http://www.manning.com/netherland/
• https://addons.mozilla.org/en-US/firefox/addon/
firesass-for-firebug/

30. Thank You!
• Twitter: @nickcooley
• Email: nick@homecooley.com
• LinkedIn: http://www.linkedin.com/in/
ncooley

31. Questions?