1. Sass & Compass
Presented by: Ethan Gardner

2. What is Sass?
• CSS preprocessor written in Ruby
• Compiles to regular CSS
• Adds many helpful features to CSS…
Official Documentation:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

3. What is Compass?
• An extension of Sass
• Contains many CSS3 helpers used in
modern web development.
• Adds many helpful features to CSS…
Official Documentation:
http://compass-style.org/reference/compass/

4. Retrofitting Compass to
Existing Project
$ compass create --bare --sass-
dir "sass" --css-dir "." --
javascripts-dir "assets/scripts"
--images-dir "images"
Installation:
http://compass-style.org/install/

5. After Running…

6. Changing Options
To change these options after Compass
has been added to the project, you can
always edit the “config.rb” file

7. Starting Compass
Navigate to the directory that contains the
“config.rb” file in the command line and
type:
compass watch

8. Variables
• Common values can assigned to
variables for use throughout a project.
• One of the best features of Sass
• $variable-name: value;

9. Using Variables
SCSS CSS output
$accent-color:#17CF57; h1 {
color: #17cf57;
h1 { }
color:$accent-color;
} fieldset {
border: 1px solid #17cf57;
fieldset {
}
border:1px solid $accent-color;
}
caption {
caption {
background: #17cf57;
background:$accent-color; color: #fff;
color:#fff; }
}

10. Working with Variables
• Assign at the top of the file or in an
external file
• Great for consistency
• Benefits are apparent with larger files

11. Nested Rules
Rules can be nested to add specificity to a
selector.

12. Adding Specificity with Nested
Rules
SCSS CSS output
ul { ul {
list-style-type: disc; list-style-type: disc;
li { }
padding:10px; ul li {
} padding: 10px;
} }

13. Ampersands in Nested Rules
When nested rules are used, an
ampersand adds properties to a child
selector and is useful for pseudo classes
like :hover.

14. Ampersands in Nested Rules
SCSS CSS output
a { a {
text-decoration:none; text-decoration: none;
&:hover { }
text-decoration:underline; a:hover {
} text-decoration: underline;
} }

15. Ampersands in Nested Rules
(cont’d)
SCSS CSS output
p { p {
font-size:14px; font-size: 14px;
&.error { }
color:#f00; p.error {
font-weight:bold; color: #f00;
} font-weight: bold;
} }

16. Did you catch the difference?
Notice there is no space between p and
.error in the CSS from the previous
example.

17. If you WANTED a space…
SCSS CSS output
p { p {
font-size:14px; font-size: 14px;
.error { }
color:#f00; p .error {
font-weight:bold; color: #f00;
} font-weight: bold;
} }

18. Multiple Nesting
You don’t have to stop at one level of
nesting. Multiple levels of nesting can be
VERY powerful.

19. Multiple Nesting
SCSS CSS output
.tablesorter { .tablesorter {
border:1px solid #000; border: 1px solid #000;
thead { }
background:#000; .tablesorter thead {
color:#fff; background: #000;
th { color: #fff;
text-align:center; }
} .tablesorter thead th {
} text-align: center;
tr { }
background:#fff; .tablesorter tr {
} background: #fff;
} }

20. @extend
@extend uses the properties of a selector
as the foundation for another selector

21. @extend
SCSS CSS output
.session { .session, .keynote, .company {
padding-left:8px; padding-left: 8px;
padding-right:20px;
padding-right: 20px;
background-repeat:repeat-y;
} background-repeat: repeat-y;
}
.keynote {
@extend .session; .keynote {
background-image:url(cat-1.png);
} background-image: url(cat-1.png);
}
.company {
@extend .session; .company {
background-image:url(cat-2.png);
background-image: url(cat-2.png);
}
}

22. @import
Properties can be imported from other
Sass files.

23. Tips for using @import
• Put common properties in external file
• Different than using @import in CSS
• Imported files should begin with an “_”

24. @import
SCSS CSS output
// Loads Compass CSS3 helpers /*
@import 'compass/css3'; Loads all helpers from Compass’
CSS3 modules and makes it
// Loads user defined files available to the rest of our
project.
@import 'base';
@import 'reset';
Imports the “_base.scss” file
and then imports the
“_reset.scss” file .
*/

25. @mixin
• Small piece of code that is used to build
something larger
• Define once and use anywhere
• Can accept arguments and parameters
• Used via the @include keyword

26. @mixin – User Defined
SCSS CSS output
#article {
$border-color:#efefef;
border: 1px solid #efefef;
@mixin content-area {
border:1px solid $border-color; padding: 10px 2%;
padding:10px 2%; float: left;
}
width: 60%;
#article { }
@include content-area;
float:left;
width:60%;
} #aside {
border: 1px solid #efefef;
#aside {
@include content-area; padding: 10px 2%;
float:right; float: right;
width:30%;
} width: 30%;
}

27. Compass @mixin
Compass provides mixins for common
CSS3 features like gradients, box-shadow,
text-shadow, etc.

28. @mixin – Compass
SCSS
#article {
@include background-image(linear-gradient(#dedede, #fff));
color:$content-text-color;
@include content-area; // user defined from previous example
@include box-shadow;
@include text-shadow;
float:left;
width:60%;
}

29. @mixin – Compass (cont’d)
CSS output
#article {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-
stop(0%, #dedede), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(#dedede, #ffffff);
background-image: -moz-linear-gradient(#dedede, #ffffff);
background-image: -o-linear-gradient(#dedede, #ffffff);
background-image: -ms-linear-gradient(#dedede, #ffffff);
background-image: linear-gradient(#dedede, #ffffff);
color: black;
border: 1px solid #efefef;
padding: 10px 2%;
-webkit-box-shadow: 0px 0px 5px #333333;
-moz-box-shadow: 0px 0px 5px #333333;
box-shadow: 0px 0px 5px #333333;
text-shadow: #efefef 0px 0px 1px;
float: left;
width: 60%;
}