SASS​ ​and​ ​SCSS​ ​Tutorial​ ​Lab​ ​2
Dave​ ​Moran
LearnToProgram.TV
For​ ​this​ ​challenge​ ​we’re​ ​going​ ​to​ ​be​ ​creating​ ​a​ ​Contact​ ​Card.​ ​ ​This​ ​card​ ​will​ ​have​ ​be​ ​laid​ ​out​ ​to
have​ ​some​ ​information​ ​for​ ​users​ ​to​ ​find​ ​information​ ​on​ ​our​ ​current​ ​user.​ ​ ​By​ ​the​ ​end​ ​of​ ​this​ ​lab
we​ ​will​ ​have​ ​a​ ​webpage​ ​that​ ​looks​ ​like​ ​this:
Finished​ ​Lab​ ​Example:
1. Download​ ​the​ ​‘contact-card.zip’​ ​file​ ​attached​ ​to​ ​this​ ​lesson​ ​and​ ​unzip​ ​it​ ​to​ ​your​ ​desktop.
2. Open​ ​the​ ​folder​ ​inside​ ​of​ ​your​ ​code​ ​editor.​ ​ ​You​ ​should​ ​have​ ​the​ ​following​ ​files:
a. Index.html
b. Style.css
3. Inside​ ​of​ ​our​ ​project​ ​folder,​ ​create​ ​a​ ​new​ ​folder​ ​called​ ​‘scss’.​ ​ ​Inside​ ​of​ ​that​ ​folder,​ ​create
a​ ​file​ ​called​ ​‘style.scss’.
4. Copy​ ​all​ ​of​ ​the​ ​styles​ ​inside​ ​of​ ​style.css​ ​into​ ​scss/style.scss.
5. Using​ ​the​ ​terminal,​ ​navigate​ ​to​ ​your​ ​project​ ​folder​ ​and​ ​run​ ​the​ ​following​ ​command.
a. Sass​ ​--watch​ ​scss/style.scss:style.css
6. To​ ​ensure​ ​that​ ​SASS​ ​is​ ​running​ ​properly,​ ​test​ ​changing​ ​the​ ​background​ ​color​ ​and
refreshing​ ​your​ ​browser​ ​to​ ​see​ ​the​ ​changes.
7. Once​ ​SASS​ ​is​ ​confirmed​ ​to​ ​be​ ​running,​ ​start​ ​creating​ ​the​ ​nests​ ​to​ ​be​ ​used​ ​in​ ​the​ ​project.
The​ ​following​ ​selectors​ ​will​ ​have​ ​nests​ ​built​ ​inside​ ​of​ ​them:
a. .contact-header
b. .contact-photo
c. .contact-details
d. .contact-footer
Were​ ​you​ ​able​ ​to​ ​complete​ ​the​ ​nesting​ ​assignment?​ ​ ​If​ ​you​ ​ran​ ​into​ ​any​ ​trouble​ ​along​ ​the​ ​way​ ​or
want​ ​to​ ​see​ ​the​ ​solution,​ ​a​ ​final​ ​version​ ​has​ ​been​ ​attached​ ​as​ ​well.​ ​ ​Feel​ ​free​ ​to​ ​compare​ ​your
code​ ​vs.​ ​the​ ​solution​ ​to​ ​see​ ​where​ ​you​ ​can​ ​improve.
Bonus
In​ ​the​ ​contact-footer,​ ​we​ ​have​ ​a​ ​button​ ​that​ ​could​ ​use​ ​some​ ​extra​ ​styles.​ ​ ​Add​ ​a​ ​new​ ​rule​ ​for​ ​the
button​ ​that,​ ​when​ ​a​ ​user​ ​hovers,​ ​the​ ​following​ ​code​ ​is​ ​applied:
e. Color:​ ​#ffffff;
f. Background-color:​ ​#007bff;
g. Border-color:​ ​#007bff;
In​ ​order​ ​to​ ​do​ ​this,​ ​we​ ​want​ ​to​ ​make​ ​sure​ ​that​ ​we’re​ ​using​ ​another​ ​level​ ​of​ ​nesting​ ​inside​ ​of​ ​the
button.​ ​ ​Additionally,​ ​we​ ​want​ ​to​ ​make​ ​sure​ ​we’re​ ​using​ ​SASS’​ ​parent​ ​selector​ ​to​ ​look​ ​at​ ​the
hover​ ​and​ ​focus​ ​pseudo-classes.