Sass & CompassPresented by: Ethan Gardner

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

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/

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/

After Running…

Changing Options

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

Starting Compass

Navigate to the directory that contains the “config.rb” file in the command line and type:

compass watch

Variables

• Common values can assigned to variables for use throughout a project.

• One of the best features of Sass

• $variable-name: value;

Using Variables

SCSS$accent-color:#17CF57;

h1 {color:$accent-color;

}

fieldset {border:1px solid $accent-color;

}

caption {background:$accent-color;color:#fff;

}

CSS outputh1 {color: #17cf57;

}

fieldset {border: 1px solid #17cf57;

}

caption {background: #17cf57;color: #fff;

}

Working with Variables

• Assign at the top of the file or in an external file

• Great for consistency

• Benefits are apparent with larger files

Nested Rules

Rules can be nested to add specificity to a selector.

Adding Specificity with Nested Rules

SCSSul {list-style-type: disc;li {

padding:10px;}

}

CSS outputul {list-style-type: disc;

}ul li {padding: 10px;

}

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.

Ampersands in Nested Rules

SCSSa {text-decoration:none;&:hover {

text-decoration:underline;}

}

CSS outputa {text-decoration: none;

}a:hover {text-decoration: underline;

}

Ampersands in Nested Rules (cont’d)

SCSSp {font-size:14px;&.error {

color:#f00;font-weight:bold;

}

}

CSS outputp {font-size: 14px;

}p.error {color: #f00;font-weight: bold;

}

Did you catch the difference?

Notice there is no space between p and .error in the CSS from the previous example.

If you WANTED a space…

SCSSp {font-size:14px;.error {

color:#f00;font-weight:bold;

}

}

CSS outputp {font-size: 14px;

}p .error {color: #f00;font-weight: bold;

}

Multiple Nesting

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

Multiple Nesting

SCSS.tablesorter {border:1px solid #000;thead {

background:#000;color:#fff;th {

text-align:center;}

}tr {

background:#fff;}

}

CSS output.tablesorter {border: 1px solid #000;

}.tablesorter thead {background: #000;color: #fff;

}.tablesorter thead th {text-align: center;

}.tablesorter tr {background: #fff;

}

@extend

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

@extend

SCSS.session {padding-left:8px;padding-right:20px;background-repeat:repeat-y;

}

.keynote {@extend .session;background-image:url(cat-1.png);

}

.company {@extend .session;background-image:url(cat-2.png);

}

CSS output.session, .keynote, .company {padding-left: 8px;padding-right: 20px;background-repeat: repeat-y;

}

.keynote {background-image: url(cat-1.png);

}

.company {background-image: url(cat-2.png);

}

@import

Properties can be imported from other Sass files.

Tips for using @import

• Put common properties in external file

• Different than using @import in CSS

• Imported files should begin with an “_”

@import

SCSS// Loads Compass CSS3 helpers@import 'compass/css3';

// Loads user defined files@import 'base';@import 'reset';

CSS output/* Loads all helpers from Compass’ CSS3 modules and makes it available to the rest of our project.

Imports the “_base.scss” file and then imports the “_reset.scss” file .*/

@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

@mixin – User Defined

SCSS

$border-color:#efefef;

@mixin content-area {border:1px solid $border-color;padding:10px 2%;

}

#article {@include content-area;float:left;width:60%;

}

#aside {@include content-area;float:right;width:30%;

}

CSS output#article {border: 1px solid #efefef;padding: 10px 2%;float: left;width: 60%;

}

#aside {border: 1px solid #efefef;padding: 10px 2%;float: right;width: 30%;

}

Compass @mixin

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

@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%;

}

@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%;

}