working with sass/compass and zurb foundation
TRANSCRIPT
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???
