working with sass/compass and zurb foundation

Responsive Web Design

Working with SASS/Compass and Zurb Foundation

What is SASS?SASS is an extension of CSS3, adding nested rules, variables, mixins,selector inheritance, and more.

What is Compass?Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in SASS instead of plain CSS.

What is Foundation?The most advanced responsivefront-end framework in the world.

Getting startedgem install sass

gem install compass

gem install zurb-foundation

Getting startedNavigate to your chosen directory in terminal

compass create <project-name> -r zurb-foundation --using foundation

Getting startedcompass watch

What makes working with SASS and Foundation great?

Lots of thingsThe gridNestingHandling of media queries Built-in functions(mixins)

The grid<div class=”row”> <div class=”large-8 columns”> 8 column content </div> <div class=”large-4 columns”> 4 column content </div></div>

The grid<div class=”row”> <div class=”large-8 small-6 columns”> 8 column content LARGE 6 column content SMALL </div> <div class=”large-4 small-6 columns”> 4 column content LARGE 6 column content SMALL </div></div>

Nestingli { font: { family: serif; weight: bold; size: 1.2em; }}

Nestingli { font-family: serif; font-weight: bold; font-size: 1.2em;}

Nestinga { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; }}

Nestinga { color: #ce4dd6; }

a:hover { color: #ffb3ff; }

a:visited { color: #c458cb; }

Media Queries@media (max-width: 600px) { insert hundreds of CSS selectors/rules}

Media Queriesh1{ font-size: 2em; @media (max-width: 600px) { font-size: 1.6em; }}

Media Queries$small-screen: emCalc(768);$medium-screen: emCalc(1280);$large-screen: emCalc(1440);

Media Queries$screen: "only screen";

$small: "only screen and (min-width:"#{$small-screen}")";

$medium: "only screen and (min-width:"#{$medium-screen}")";

$large: "only screen and (min-width:"#{$large-screen}")";

$landscape: "only screen and (orientation: landscape)";

$portrait: "only screen and (orientation: portrait)";

Media Queriesh1{ font-size: 1em; @media #{$small}{ font-size: 1.4em; } @media #{$medium}{ font-size: 1.6em; } @media #{$large}{ font-size: 2em; }

}

Functions(mixins)$pink: #ce4dd6;

a { color: $pink; &:hover { color: darken($pink, 10%); } &:visited { color: darken($pink, 20%); }}

Functions(mixins)a { color: #ce4dd6; }a:hover { color: #ba2dc3; }a:visited { color: #93239a; }

Demohttp://clintrobinson.net

Questions???

Thank You!Clint Robinson - Advancement and Community Engagement

clint.robinson@usask.ca