Day 11 : June 8, 2015 Assignment

Refactor Cool Design Agency with Sass

Description

Refactor the Cool Design Agency Project’s CSS into Sass.

Objectives

Learning Objectives

Upon completion of this assignment, you should:

• be able to convert vanilla CSS into Sass (.scss).
• Understanding how nesting works within Sass.
• be able to run sass -- watch to generate a new .scss file.

Performance Objectives

After completing this assignment, you be able to effectively use

• sass --watch

Details

Deliverables

• a Sass file with a .scss extension
• a newly generated .css file
• a css map file
• the original index.html

Requirements

• Inside your of “day_11” folder, paste a copy of files of the Cool Design Agency project (index.html, style.css, images, etc) directly inside of a folder called “sassy_design_agency”.
• rename style.css to style.scss. When immediately prompted by Finder that this will change the extension, choose the option that ends with .scss.
• In the terminal, run the sass --watch from the root folder of the project.
• Convert your existing code to Sass
• Test site in browser to make sure that the design has not changed.
• After all edits are complete, stop the watch process (crtl-C)
• Submit project to Github